小說CSS下拉菜單/ Megamenu

Question

嗨我想創建一個新的導航下拉菜單（新的，因爲我以前沒有見過）。

基本上，當我將鼠標懸停在導航項上時，下拉框應該出現在導航欄下方。與正常下拉菜單的區別在於，我希望此下拉菜單包含所有導航子項目（而不僅僅是屬於懸停項目的項目）。因此，在我的代碼示例中，如果有人將鼠標懸停在Nav 1上，則會顯示所有項目a-i。

<ul> 
      <li><a href="#">Nav 1</a> 
       <ul> 
        <li><a href="#">item a</a></li> 
        <li><a href="#">item b</a></li> 
        <li><a href="#">item c</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Nav 2</a> 
       <ul> 
        <li><a href="#">item d</a></li> 
        <li><a href="#">item e</a></li> 
        <li><a href="#">item f</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Nav 3</a> 
       <ul> 
        <li><a href="#">item g</a></li> 
        <li><a href="#">item h</a></li> 
        <li><a href="#">item i</a></li> 
       </ul>     
      </li> 
     </ul> 

注意：下拉應該是相同的寬度爲資產淨值和資產淨值的每個項目的鏈接應該出現在它下面。 I've attached a sketch!

我曾考慮過在UL中放置一個包含下拉列表的div，並將其顯示在ul.hover上，但那樣就不會驗證，您將無法定位哪個li被徘徊。

如果有人能讓我知道這將會很棒，那麼使用css就不可能實現這一點。

對不起，如果這似乎是漫不經心...希望有人會明白我後來！

Answer 1

因此，懸停在導航的任何部分上都會顯示所有子級別？

這是jsfiddle的基本功能;然後你需要使用CSS來設計它。

如

http://www.alistapart.com/articles/hybrid/

http://htmldog.com/articles/suckerfish/dropdowns/

（還有谷歌上的數百個例子）