我有一个设置了背景颜色的导航菜单。当您将鼠标悬停在导航中的 anchor 标记上时，背景颜色会发生变化。标准的东西。
但是，我正在尝试让背景图像显示在 anchor 标记下方，以提供更好的视觉效果和用户体验。我遇到的问题是背景图像位于 anchor 标记内，我希望它位于 anchor 标记下方。我知道 IE 不支持 li:hover 所以添加到 li 是行不通的。
如有任何帮助，我们将不胜感激。
代码如下:
<style>
#nav {
display: block;
height: 40px;
line-height: 35px;
list-style: none outside none;
margin: 20px auto 0 auto;
position: relative;
max-width: 750px;
min-width: 750px;
width: 78.2%;
}
#nav li {
display: inline;
text-align: center;
float:left;
}
#nav li a{
color: #fff;
display: block;
float: left;
font-family: HelveticaNeue-light,Helvetica,sans-serif;
font-size: 1em;
height: 100%;
padding: 0px 23px 0;
text-align: center;
text-decoration: none;
line-height: 40px;
background:#4D4D4D;
}
#nav li a:hover, #nav .active a {
background: url("../../images/navArrow.png") no-repeat bottom center #a4c723;
color: #4d4d4d;
}
</style>
<html>
<ul id="nav">
<li><a href="home.html">home</a></li>
<li><a href="services.html">services</a></li>
<li><a href="about.html">about</a></li>
<li><a href="somethingElse.html">somethingElse</a></li>
<li><a href="AnotherSomething.html">AnotherSomething</a></li>
</ul>
</html>
最佳答案
在这里，您可以通过添加 <span> 来做到这一点在 anchor 标记内，并将其绝对定位在 anchor 下。 (字体忘记将 position:relative; 添加到 <li> 的)
我已经为您创建了一个示例:http://jsfiddle.net/peduarte/5PbKD/
*编辑*
根据您在下面的第一条评论:
要使其居中，您需要 span一个left 50% 的值和一个负 margin-left图像宽度一半的值。
如果图像宽度为 100 像素，则 margin-left将是 -50px
关于html - 在导航菜单中将背景图像添加到列表或 anchor 标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8340902/