CSS:UL导航-悬停，背景色错误_Css_Html Lists_Navigationbar

CSS:UL导航-悬停，背景色错误

css

CSS:UL导航-悬停，背景色错误,css,html-lists,navigationbar,Css,Html Lists,Navigationbar,悬停时，背景色似乎位于作为导航项的“框”之外。我试过调整一切。这是我的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><

悬停时，背景色似乎位于作为导航项的“框”之外。我试过调整一切。这是我的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;
}









#梅努托普{
明确：两者皆有；
填充顶部：18px；
高度：55px；
字号：12号；
背景色：#000；
}
#menuTop ul，#menuTop li{
保证金：0；
填充：4px0；
}
#梅努托普{
列表样式类型：无；
}
#李梅努托普{
显示：块；
背景色：#3C87D1；
文本对齐：居中；
宽度：197px；
高度：30px；
边际：0像素0；
填充：4px0；
边框：1px实心#2A5E92；
}
#menuTop a{
显示：块；
保证金：0；
填充：4px0；
}
#菜单组a:链接，#菜单组a:已访问{
宽度：197px；
高度：30px；
填充：4px0；
保证金：0；
字体系列：“投石机MS”，Helvetica，无衬线；
颜色：#fff；
文字装饰：无；
}
#菜单提示a：悬停{
宽度：197px；
高度：30px；
填充：4px0；
保证金：0；
颜色：#fff；
背景色：#5F9FFF；
}
李梅努霍里兹{
浮动：左；
}

如果您的问题只是盒子外面的颜色，请将此添加到您的#menuTop li

overflow:hidden;

为我工作。：）

我从样式表中删除了不必要的/双重的定义，并修复了这个bug

* {
    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
}

以下是一些注意事项：

在设计布局之前，使用
```
*
```
将所有元素的边距和填充设置为零非常方便
仅将菜单项的宽度和高度设置为
```
a
```
元素（嵌套最多的元素）。周围的
```
li
```
元素将采用相同的大小。也可以使用
```
行高
```
而不是
```
高度
```
，因为它会自动使文本垂直居中
不要在
```
：link
```
、
```
：visted
```
、
```
：hover
```
或
```
：active
```
中重新定义样式（例如尺寸和字体）。它为浏览器提供了不必要的计算

试试这个：

这比我提议的要容易得多。这里有一个演示：谢谢大家。。这对我有用：）太好了！谢谢你的指点。迈达斯，你能告诉我如何添加，现在把容器从顶部往下推吗？它现在被推到顶部，我尝试向容器中添加填充物以将其向下移动大约10px，结果只是将标题与边框分开。什么是“将标题与边框分开”？边框似乎被推到顶部。当我尝试将填充添加到容器顶部时，边框看起来仍然被推到顶部，但我的标题被向下推，留下了可以看到主体背景图像的空间。基本上，所有的填充似乎不再到位，我不知道如何修复，任何帮助都将不胜感激！我想我明白了——我在menutop和menutopul中添加了“0”填充元素，并从CSS的顶部删除了0。非常感谢。

#menuTop {
    clear: both;
    padding-top: 18px;
    height: 55px;
    font-size: 12pt;
    background-color: #000;
    text-align: center;
    font-family: 'Trebuchet MS', Helvetica, 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;
}