新しいCSSドロップダウンメニュー/メガメニュー

Question

こんにちは、新しいタイプのnavドロップダウンを作成したいと思っています。

基本的にナビアイテムにカーソルを合わせると、ナビゲーションの下にドロップダウンボックスが表示されます。通常のドロップダウンとの違いは、このドロップダウンには、ナビのサブアイテム（ホバーされたアイテムに属するアイテムだけでなく）がすべて含まれていることです。したがって、私のコード例では、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> 

注：ドロップダウンがNAVと同じ幅である必要があり、各ナビゲーション項目のリンクがその下に表示されます。 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/

（Googleで数百の例があります）