Sprite導航下拉菜單

我需要在基於一個圖像（CSS Sprite）的導航上放置一個下拉菜單。我一直在嘗試幾個小時，但我無法弄清楚。這裏的HTML：Sprite導航下拉菜單

<ul id="nav"> 
       <li class="nav-1"><a href="/">Storage Auctions</a></li> 
       <li class="nav-2"><a href="/blog.php">Blog</a></li> 

       <li class="nav-3"><a href="/about.php">About</a> 



       </li> 

       <li class="nav-4"><a href="/contact.php">Contact</a></li> 
       <li class="nav-5"><a href="/faq.php">FAQ</a></li> 
      </ul>

我需要的下拉下的「關於」鏈接去。我意識到它必須在'li'標籤中，但我無法獲得正確的CSS。下面是這個精靈當前CSS：

ul#nav { 
    margin:75px 0 0 0; 
    padding:0; 
    list-style:none; 
    clear: both;  
} 

#nav li { 
    overflow:hidden; 
    text-indent:-9999px; 
    display:inline; 
    float:left; 
    width: 398px; 
} 

#nav li a { 
    background:url(../images/nav-sprite.jpg) no-repeat; 
    width: 398px; 
    height: 40px; 
    display:block; 
} 


#nav li.nav-1 {width:85px; height:40px;} 
#nav li.nav-1 a:hover{background-position:0px -40px;} 

#nav li.nav-2 {width:80px; height:40px;} 
#nav li.nav-2 a:hover{background-position:-85px -40px;} 
#nav li.nav-2 a{background-position:-85px 0px;} 

#nav li.nav-3 {width:82px; height:40px;} 
#nav li.nav-3 a:hover{background-position:-165px -40px;} 
#nav li.nav-3 a{background-position:-165px 0px;} 

#nav li.nav-4 {width:97px; height:40px;} 
#nav li.nav-4 a:hover{background-position:-247px -40px;} 
#nav li.nav-4 a{background-position:-247px 0px;} 

#nav li.nav-5 {width:54px; height:40px;} 
#nav li.nav-5 a:hover{background-position:-344px -40px;} 
#nav li.nav-5 a{background-position:-344px 0px;}

任何幫助將不勝感激！

來源

2012-02-14 kennyk3

將所有樣式放在A-tag上，而不是LI。（除float:left）

來源

2012-02-14 22:25:27

給這個#nav裏的位置：相對

插入在您指定李娜微升。樣式#nav ul李ul到位置：絕對。給它一個寬度和高度，並在px中的頂部和左側位置。和背景顏色。（測試它顯示之前，你設置顯示沒有）。將它設置爲顯示：無

然後在#nav李一：懸停UL使其顯示：塊

（我認爲這應該工作）

來源

2012-02-15 10:01:54 plebksig

謝謝你，現在我要去嘗試這種權利。我希望我會在我的初始文章中做到這一點，但是，這裏有一個很好的工作示例： http://jsfiddle.net/kennyk3/TTDNp/ – kennyk3 2012-02-15 16:14:12

我嘗試了您的示例，但不幸的是，它無法正常工作。我從來沒有這麼麻煩搞清楚CSS。我真的只需要一個簡單的下拉菜單，其中有兩個項目。如果任何人都可以檢查上面的jsfiddle並提出解決方案，我將不勝感激。 – kennyk3 2012-02-15 16:22:56

再次嗨。這主要是因爲你的瘋狂風格，它沒有工作，文本縮進等。我爲你創建了一個新的小提琴，它有我的變化並使其工作。請注意，我添加的li：hover可能與所有瀏覽器不兼容，我可能會使用jquery作爲備份。 http://jsfiddle.net/mq8xX/ – plebksig 2012-02-17 10:16:17

Sprite導航下拉菜單

回答

相關問題