JavaScript を用いて、onmouseover と onmouseout の操作に対応して class 属性値を切り替える。
初期値は off で、子要素の ol 要素は非表示。オンマウスで値が off にセットされ、子要素の ol 要素が表示される。
<ul class="main">
<li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">ぬるぽ
<ol>
<li>ガッ</li>
<li>ガッガッ</li>
<li>ガッガッガッ</li>
</ol>
</li>
</ul>
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;}
各 li 要素の支配領域を CSS の border で示す。
子要素が表示されると親要素の領域も拡大し、拡大した領域上にカーソルが存在する限り、属性値の切り替えが継続することに注目!