JavaScript を用いて、onmouseover と onmouseout の操作に対応して class 属性値を切り替える。
初期値は off で、子要素の ol 要素は非表示。オンマウスで値が off にセットされ、子要素の ol 要素が表示される。
div
{height:5em;}
ul.main
{position:absolute;}
ul.main li
{margin:1em; padding:10px; border:1px solid #000; list-style:inside; background:#ccc;}
ul.main li li
{background:#fff;}
li.on ol
{display:block;}
li.off ol
{display:none;}
ul.main に position:absolute; を指定すれば、子要素の表示により領域が拡張されても他の要素の配置に影響を及ぼさない。
すると不思議なことに WinIE ではカーソルが拡張前の領域を外れると属性値切り替えがキャンセルされる。そこで作例6までは、WinIE 対策だけを考えていきます。