CSS：UL导航-悬停时，背景颜色错误

如何解决CSS：UL导航-悬停时，背景颜色错误

| 悬停时，背景颜色似乎出现在我的导航项“框”之外。我已经尝试过调整所有内容。这是我的CSS和HTML ...

<div id=\"menuTop\">

 <ul id=\"menuOne\" class=\"menuHoriz\">
    <li><a href=\"index.html\">home</a></li>
    <li><a href=\"communication.html\">about us</a></li>
    <li><a href=\"about.html\">services</a></li>
    <li><a href=\"help.html\">samples</a></li>
    <li><a href=\"contact.html\">contact</a></li>
</ul>

</div>

#menuTop {
clear: both;
padding-top: 18px;
height: 55px;
font-size: 12pt;
background-color: #000;
 }

#menuTop ul,#menuTop li {
margin: 0;
padding: 4px 0 0 0;
}

#menuTop ul {
list-style-type: none;
}

#menuTop li {
display: block;
background-color: #3C87D1;
text-align: center;
width: 197px;
height: 30px;
margin: 0 0px 0 0;
padding: 4px 0 0 0;
border: 1px solid #2A5E92;
}

#menuTop a {
display: block;
margin: 0;
padding: 4px 0 0 0;
}

#menuTop a:link,#menuTop a:visited {
width: 197px;
height: 30px;
padding: 4px 0 0 0;
margin: 0;
font-family: \'Trebuchet MS\',Helvetica,sans-serif;
color: #fff;
text-decoration: none;
}

#menuTop a:hover {
width: 197px;
height: 30px;
padding: 4px 0 0 0;
margin: 0;
color: #fff;
background-color: #5F9FFF;
}

ul.menuHoriz li {
float: left;
}

    

解决方法

我从样式表中删除了不必要的/双重定义，并修复了该错误。

* {
    margin: 0;
    padding: 0
}
#menuTop {
    font: 12pt \'Trebuchet MS\',Helvetica,sans-serif;
    padding-top: 18px;
    height: 55px;
    background: #000
}
#menuTop ul {
    padding-top: 4px;
    list-style: none
}
#menuTop li {
    background: #3C87D1;
    border: 1px solid #2A5E92;
    text-align: center
}
#menuTop a {
    display: block;
    width: 197px;
    line-height: 30px
}
#menuTop a:link,#menuTop a:visited {
    color: #fff;
    text-decoration: none
}
#menuTop a:hover {
    background-color: #5F9FFF
}
ul.menuHoriz li {
    float: left
}

这里有一些注意事项： 在设计布局之前，通过使用ѭ2to将所有元素的边距和填充设置为零是很方便的。 将菜单项的宽度和高度仅设置为

a

元素（嵌套最多的元素）。周围的“ 4”元素将采用相同的大小。也使用

line-height

代替

height

，因为它会自动使文本垂直居中。 不要用

:link

，

:visited

，

:hover

或

:active

重新定义样式（例如尺寸和字体）。它为浏览器提供了不必要的计算。     ,如果您的问题只是盒子外面的颜色，请将其添加到您的#menuTop li

overflow:hidden;

为我工作。 :)     ,试试这个：jsfiddle示例

#menuTop {
    clear: both;
    padding-top: 18px;
    height: 55px;
    font-size: 12pt;
    background-color: #000;
    text-align: center;
    font-family: \'Trebuchet MS\',sans-serif;
    line-height: 34px;    
}
#menuTop a {
    float: left;
    border: 1px solid #2A5E92;
    background-color: #3C87D1;
    width: 197px;
    color: #fff;
    text-decoration: none;
}
#menuTop a:hover {
    background-color: #5F9FFF;
}