:hover でプルダウンメニュー 補足2

Firefox と Opera7 で動作確認。

「ぬるぽ」にカーソルを合わせると、「ガッ」「ガッガッ」「ガッガッガッ」が表示されます。

スペース確保のための div 要素を削除。position:absolute; というスタイル指定のため「ぬるぽ」が以降の要素と重なって表示されていることに注目!

<ul class="main">
<li class="parent">ぬるぽ
<ol>
<li>ガッ</li>
<li>ガッガッ</li>
<li>ガッガッガッ</li>
</ol>
</li>
</ul>

ul.main
{position:absolute; width:100%;}
li.parent ol
{display:none;}
li.parent:hover ol
{display:block;}