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

问题描述：

悬停时，背景颜色似乎超出了作为我的导航项目的“框”。我曾尝试调整一切。这里是我的CSS和HTML ...CSS：UL导航 - 关于悬停，背景颜色错误

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

这里有一些注意事项：

这是方便使用*，设计布局前设置所有元素为零margin和padding。
仅将菜单项的宽度和高度设置为a元素（最嵌套的元素）。周围的li元素将采用相同的大小。同时使用line-height而不是height，因为它会自动使您的文本垂直居中。
不要在:link,:visited,:hover或:active（例如尺寸和字体）中重新定义样式。它给浏览器带来了不必要的计算。

谢谢大家..这对我工作:)太棒了！感谢指针。 – Katelyn 2011-05-27 18:27:11

迈达斯你能告诉我如何从现在开始添加容器吗？它现在被推到顶部，我试图向容器中添加填充以将其向下移动约10px左右，并且它最终将我的标题与我的边界分开。 – Katelyn 2011-05-27 18:34:24

你是什么意思'将我的标题与我的边界分开'？ – Midas 2011-05-27 21:01:49

答

如果你的问题是只箱子外面传来的颜色，添加到您的#menuTop李

overflow:hidden;

为我工作。 :)

这远远比我更容易提出。这是一个演示：http://jsfiddle.net/LN26d/ – thirtydot 2011-05-26 21:19:35

答

试试这个：jsfiddle example

#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; 
}

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

相关推荐