css - 我的导航列表是重叠填充。我怎样才能防止这种情况发生？

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

由于您在 anchor 标记上使用 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;
}

Edited Fiddle .