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

Firefox と Opera7 で動作確認。

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

position:absolute; の指定と div 要素の高さ指定を削除。「ガッ」「ガッガッ」「ガッガッガッ」が表示されるとき、以降の要素の配置が変化することに注目!

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

li.parent ol
{display:none;}
li.parent:hover ol
{display:block;}