Question

我有一个导航菜单，其背景颜色设置。将鼠标悬停在导航中的锚标记上时，背景颜色会发生变化。标准的东西。

但是，我试图让背景图像显示在锚标记下方，以提供更好的视觉和用户体验。我遇到的问题是背景图像位于锚标记内，我希望它位于锚标记下方。我知道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>

Answer 1

在这里，您可以通过在锚标记内添加<span>并将其绝对定位在锚点下来实现。（字体忘记将position:relative;添加到<li>＆＃39; s

我为您创建了一个示例：http://jsfiddle.net/peduarte/5PbKD/

<强> * 修改 *

根据您在下面的第一条评论：要使其居中，您需要span left的{{1}}值和负 50%值为图像的一半＆＃39}宽度。
如果图片宽度为100px，则margin-left将为margin-left

例如：http://jsfiddle.net/peduarte/5PbKD/1/

Answer 2

您可以为每个列表项添加子菜单。例如：

<li><a href="home.html">home</a>
    <ul>
       <li>ARROW</li>
    </ul>
</li>

然后使用CSS在悬停时显示/隐藏它。如果您将图像放在子菜单li中，使其显示在下方。

将背景图像添加到导航菜单中的列表或锚标记

2 个答案: