Takazudo Clipping*

まず、モダンブラウザに対しては、CSSだけでできる。
基本は、2階層目以降を最初からdisplay:noneにしておき、li:hoverしたとき、1個下にあるulをdisplay:blockにする。

<div class="treeNav">
    <ul><!-- ←display block -->
        <li>
            <a href="http://google.com/">Menu</a>
            <ul><!-- ←display none -->
                <li><a href="http://google.com/">Menu</a></li>
                <li><a href="http://google.com/">Menu</a></li>
                <li><a href="http://google.com/">Menu</a></li>
            </ul>
        </li>
    </ul>
</div>

div.treeNav a{
    display:block;
    zoom:1; /* ie */
}
div.treeNav ul{
    width:100px;
}
    div.treeNav li{
        position:relative;
        width:100px;
        float:left; /* ie */
        clear:both; /* ie */
    }
        div.treeNav li ul{
            position:absolute;
            left:100px; /* 右にずらす */
            top:0;
            display:none;
        }
        div.treeNav li:hover > ul{
            display:block; /* 乗ったら直下コンテナ表示 */
        }

最後の div.treeNav li:hover > ul がポイント。直の子供だけがdisplay:blockになる。
IE6は子供セレクタに対応していのと、a以外の要素に対する:hoverに対応していないため、こんなのをjQueryで書く。やってることは同じ。

if(!($j.browser.version==6 && $j.browser.msie)) return;
$j("div.treeNav li").hover(function(){
    $j(this).children("ul").eq(0).css("display","block");
},function(){
    $j(this).children("ul").eq(0).css("display","none");
});

よしこれで完成。簡単じゃないかーと思ったら、何やら、以下のように、前に消したはずのブロックが残っちゃう現象がIE67で発生していた。

hoverアウトしたときにdisplay:noneに戻すのが正しく処理されていない模様？いろいろいじってみたけど分からなかったので、どうせIEの内部処理がいかれぽんちなだけでしょということにしておいて、マウスオーバー時には直子供コンテナを、visibility:visibleにし、その子孫のコンテナをすべてvisibility:hiddenにする。マウスアウト時には、子孫コンテナ全てvisibility:hiddenにするという、display:block/noneに加え、visibilityで2重に隠すような処理をIEにだけjsで加えたら、この現象はなくなった。

• ドロップダウメニュー(HTML)
• そのCSS(CSS)
• そのjavascript(js)
• まとめたやつ(zip)

IE6,7,Firefox2,3,Safari3あたりで動くこと確認。
ご利用はご自由に。バグなどありましたら教えていただけると幸いです。