作例6

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

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

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

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

対策1

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

対策2

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

対策3

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

ぬるぽ
1. ガッ
2. ガッガッ
3. ガッガッガッ

div
{height:5em;}
ul.main
{position:absolute;}
ul.main li
{margin:1em; border:1px solid #000; list-style:inside; background:#ccc;} /* padding:10px; を削除 */
ul.main li ol
{margin:0;}
ul.main li li
{margin:0; padding:10px; background:#fff;}
li.on ol
{display:block; width:80%; overflow:hidden;}
li.off ol
{display:none;}

こうしてようやく問題の封じ込めに成功したわけだけれども、Opera や Firefox ならそもそも怪奇現象は起きないわけで、WinIE にはまったく困ったものだと思う。