我的导航列表是重叠填充.我怎么能阻止这个？

Question

当您将鼠标悬停在链接上时,我正在尝试创建一个突出显示链接周围区域的导航,并允许您单击突出显示的任何区域以关注该链接.看起来我的填充是重叠的,你只能点击链接左边的填充,而右边的填充变成右边链接的左边距.

JSFiddle:http://jsfiddle.net/Hh7XG/1/

HTML

<div id="menubar">
      <ul>
        <li><a href=# >Home</a></li>
        <li><a href=# >About Us</a></li>
        <li><a href=# >Online Courses</a></li>
        <li><a href=# >Registration</a></li>
        <li><a href=# >Faculty</a></li>
        <li><a href=# >Calendar</a></li>
        <li><a href=# >Store</a></li>
        <li><a href=# >Testimonials</a></li>
        <li><a href=# >Online Lectures</a></li>
        <li><a href=# >Contact Us</a></li>
        <li><a href=# >Forum</a></li>
        <li><input class="searchbox" trype="text" value="Search" onfocus="this.value='';" onblur="if(this.value=='') this.value='Search';"/> </li>
      </ul>
    <div style="clear:both;"></div>
    </div>

CSS

#menubar{
height:auto;
background:#ebebec;
margin-top:0px;
padding-top:0px;
padding-left:0px;
}
ul{
list-style-type:none;
padding:0px;
margin:0px;
}
#menubar ul li{
text-decoration:none;
color:#005da4;
text-align:center;
margin:none;
width:auto;
padding-left:0;
padding-right:0;
float:left;
}
#menubar ul li:hover a{
background:#acce39;
}
#menubar ul li a{
text-decoration:none;
color:#005da4;
display:block;
width:100%;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
margin-left:0;
margin-right:0;
}
.searchbox
{
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:solid 1px black;
    padding:5px;
    margin:5px;
    margin-left:15px;
    align:left;
}

(对不起,如果以下内容没有意义.我会非常乐意澄清.)

我希望它显示如下:(|是li之间的边界)

|    Link    |    Link    |    Link    |

当我将鼠标悬停在最左侧链接右侧的填充上时,我希望它看起来像这样:( X是突出显示,^是我的鼠标)

|XXXXLinkXXXX|    Link    |    Link
           ^

但它的行为是这样的:

|    Link|    Link|    Link    |   

当鼠标悬停在最左侧的链接上时,突出显示如下所示:

|XXXXLinkXXXX|Link    |    Link
    ^

但当我将鼠标悬停在链接右侧的填充上时,它看起来像这样:

|    Link|XXXXLinkXXXX|Link    |
           ^

Answer 1

由于您在padding锚标签上使用属性来增加其宽度,因此无需指定width: 100%.只需删除它,它的工作原理:

#menubar ul li a {
    text-decoration:none;
    color:#005da4;
    display:block;    /* Since li element is floated itself */
                      /* it doesn't need to use inline-block value for display */

    /* width:100%; */ /* <-- remove this declaration */
    padding: 10px 20px;
    text-align:center;
    margin-left:0;
    margin-right:0;
}

编辑小提琴.