作例7

JavaScript を用いて、onmouseover と onmouseout の操作に対応して class 属性値を切り替える。

初期値は off で、子要素の ol 要素は非表示。オンマウスで値が off にセットされ、子要素の ol 要素が表示される。

ul.main に position:absolute; を指定すれば、子要素の表示により領域が拡張されても他の要素の配置に影響を及ぼさない。

すると不思議なことに WinIE ではカーソルが拡張前の領域を外れると属性値切り替えがキャンセルされる。

対策1

親要素に幅を指定すると、横方向へ属性値切り替え領域が拡張される。この結果、子要素の「ガッ」へカーソルを移動できるようになった。
おまじないとして子要素の ol 要素に overflow:hidden; を指定（作例5以降で意味を持つ）。

対策2

子要素の上下 margin を潰した。この結果、すべての子要素上へカーソルを移動できるようになった。

対策3

仕様に反して属性値切り替えがキャンセルされる領域をつぶした。

追加装飾

WinIE と Firefox と Opera で見た目を揃え、ついでにちょっと見映えを改善してみた。

ぬるぽ
1. ガッ
2. ガッガッ
3. ガッガッガッ
いざ
1. 鎌倉
2. さらば

<div>
<ul class="main">
<li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">ぬるぽ
<ol>
<li>ガッ</li>
<li>ガッガッ</li>
<li>ガッガッガッ</li>
</ol>
</li>
<li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">いざ
<ol>
<li>鎌倉</li>
<li>さらば</li>
</ol>
</li>
</ul>
</div>

div
{height:3em;}
div *
{margin:0; padding:0;}
ul.main
{position:absolute; width:100%;}
ul.main li
{padding-left:0.5em; list-style:none; background:#ccc; border:1px solid #000; line-height:2;}
li.on,li.off
{width:8em; float:left;}
ul.main li ol
{margin-left:-0.5em; position:relative; top:0.5em; left:0.5em; width:8.5em; border-bottom:1px solid #000;}
ul.main li li
{list-style:decimal inside; background:#fff; border-bottom:none;}
li.on ol
{display:block;}
li.off ol
{display:none;}

試行錯誤メモ

見た目の微調整は文法通り。問題が発生したのは float:left; で li.on,li.off を横に並べるスタイル指定。
ul.main に position:absolute; を指定すると Opera が li 要素を float:left; してくれない。
Firefox と Opera は ul.main を position:absolute; の指定なしでも、float させた li 要素の子要素を展開しても以降の要素の配置に影響しない（なぜ?）。
でも WinIE では position:absolute; が必要。position:absolute; とセットで width を指定してみると、Opera もようやく話を分かってくれた。
そして子要素の ol 要素に position:relative; を指定すると「おまじない」が不要に。WinIE の挙動は謎。