添加背景圖像列表或導航菜單中的錨定標記

我有一個導航菜單，它具有背景顏色設置。當您將鼠標懸停在導航欄中的錨標籤上時，背景顏色會發生變化。標準的東西。添加背景圖像列表或導航菜單中的錨定標記

但是，我試圖讓背景圖像出現在錨標籤下方以提供更好的視覺和用戶體驗。我遇到的問題是背景圖像位於錨標籤內，我希望它位於錨標籤下方。我知道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

添加背景圖像列表或導航菜單中的錨定標記

回答

相關問題