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

我有一个导航菜单，它具有背景颜色设置。当您将鼠标悬停在导航栏中的锚标签上时，背景颜色会发生变化。标准的东西。添加背景图像列表或导航菜单中的锚定标记

但是，我试图让背景图像出现在锚标签下方以提供更好的视觉和用户体验。我遇到的问题是背景图像位于锚标签内，我希望它位于锚标签下方。我知道IE不支持李：悬停，所以添加到李不会工作。

任何帮助将不胜感激。

下面是代码：

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

来源

2011-12-01 gilmoreja

在这里，你可以做到这一点通过添加<span>锚标记，锚下绝对位置这里面。（字体忘记添加position:relative;到<li>的）

我已经创建了一个例子：http://jsfiddle.net/peduarte/5PbKD/

* 编辑 *

按低于您的评论：为中心它，你给span一个left值50%和一个负margin-left价值的一半图像的宽度。
如果图像是100像素宽，该margin-left将-50px

Exmample：http://jsfiddle.net/peduarte/5PbKD/1/

来源

2011-12-01 11:58:53 peduarte

对不起，我本来应该把这个评论放在你的问题下面，而不是下面的问题。感谢这一点，它几乎达到了我想要的。由于每个列表项的宽度都是可变的，因此如何定位跨度以便对每个列表项正确集中？ – gilmoreja

看看我的编辑 – peduarte

完美谢谢！ – gilmoreja

你可以添加一个子菜单到每个列表项。例如：

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

然后使用CSS在悬停时显示/隐藏它。如果你把你的图像放在子菜单里，那会让它出现在下面。

来源

2011-12-01 11:59:35 SpaceBeers

感谢这一点，它几乎达到了我想要的。由于每个列表项的宽度都是可变的，因此如何定位跨度以便对每个列表项正确集中？ – gilmoreja

下面是一个简单的例子 - http://jsfiddle.net/spacebeers/HLmBF/ 我没有做过任何悬停或使用背景图片，但你明白了。您可以使用background-position属性使其居中。 – SpaceBeers

现在弹出悬停 - http://jsfiddle.net/spacebeers/HLmBF/3/ – SpaceBeers

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

回答

相关问题