【CSS】孫メニューまでオッケーなCSSのプルダウンメニュー

以前にご紹介した「CSSで実現するプルダウンメニュー」のコメントで、孫メニューまでプルダウンする方法のリクエストをいただきましたので、ご紹介します。

確認ブラウザは IE7、IE8、Firefox3、Chrome2、Opera9、Safari3 です。
CSS のみでは IE6 対応が不可能ですが、前回同様 IE の独自機能（DHTML）を併用することで IE6 でも孫メニューまでのプルダウンメニューを実現しています。

まずは、以下のサンプルをご覧ください。

• シーブレイン
  • コーポレート
  • WEBサイト制作
    • バシャログ。
    • バシャログ.biz
  • マニュアル制作
    • Document_blog
    • ペンペケペン
  • ローカライズ
    • 今日のIT英語
• 検索エンジン
  • Yahoo! Japan
  • Google
    • 画像検索
    • 動画検索
    • マップ
    • ニュース
    • グループ
  • Goo
  • excite
  • Biglobe
• 週刊少年漫画
  • 少年ジャンプ
  • 少年マガジン
  • 少年サンデー

このサンプルの HTML は以下のようになっています。

<ul id="pulldown-menu">

<li><a href="#">シーブレイン</a>
    <ul>
    <li><a href="http://c-brains.jp/">コーポレート</a></li>
    <li><a href="http://c-brains.jp/web-site/">WEBサイト制作</a>
        <ul>
        <li><a href="http://c-brains.jp/blog/wsg/">バシャログ。</a></li>
        <li><a href="http://bashalog.biz/">バシャログ.biz</a></li>
        </ul>
    </li>
    <li><a href="http://c-brains.jp/document/">マニュアル制作</a>
        <ul>
        <li><a href="http://c-brains.jp/blog/document/">Document_blog</a></li>
        <li><a href="http://c-brains.jp/blog/penpen/">ペンペケペン</a></li>
        </ul>
    </li>
    <li><a href="http://c-brains.jp/localization/">ローカライズ</a>
        <ul>
        <li><a href="http://c-brains.jp/it_english/">今日のIT英語</a></li>
        </ul>
    </li>
    </ul>
</li>

<li><a href="#">検索エンジン</a>
    <ul>
    <li><a href="http://www.yahoo.co.jp">Yahoo! Japan</a></li>
    <li><a href="http://www.google.co.jp">Google</a>
        <ul>
        <li><a href="http://images.google.co.jp/">画像検索</a></li>
        <li><a href="http://video.google.co.jp/">動画検索</a></li>
        <li><a href="http://maps.google.co.jp/">マップ</a></li>
        <li><a href="http://news.google.co.jp/">ニュース</a></li>
        <li><a href="http://groups.google.co.jp/">グループ</a></li>
        </ul>
    </li>
    <li><a href="http://www.goo.ne.jp">Goo</a></li>
    <li><a href="http://www.excite.co.jp/">excite</a></li>
    <li><a href="http://www.biglobe.ne.jp">Biglobe</a></li>
    </ul>
</li>

<li><a href="#">週刊少年漫画</a>
    <ul>
    <li><a href="http://jump.shueisha.co.jp/">少年ジャンプ</a></li>
    <li><a href="http://www.shonenmagazine.com/">少年マガジン</a></li>
    <li><a href="http://www.websunday.net/">少年サンデー</a></li>
    </ul>
</li>

</ul>

前回同様、非常にシンプルな HTML です。

今回の CSS は以下となります。

* {
        margin: 0;
        padding: 0;
        list-style: none;
}

ul#pulldown-menu a {
        color: #FFFFFF;
        text-decoration: none;
}
ul#pulldown-menu a:link,
ul#pulldown-menu a:visited {
        background: #3366FF;
}
ul#pulldown-menu a:hover,
ul#pulldown-menu a:active {
        background: #FF9933;
}

ul#pulldown-menu li {
        float: left;
        position: relative;
        margin: 0 0.5em;
        width: 9em;
        height: 2em;
        font-weight: bold;
        line-height: 2em;
}
ul#pulldown-menu li a {
        display: block;
        width: 9em;
        height: 2em;
        text-align: center;
}

ul#pulldown-menu li ul li {
        float: none;
        margin: 0;
        font-weight: normal;
}

/* 下層のメニューを不可視に */
ul#pulldown-menu li ul,
ul#pulldown-menu li ul li ul {
        display: none;
}

/* 疑似要素 :hover で子メニューを可視、孫メニューを不可視に */
ul#pulldown-menu li:hover ul {
        display: block;
        position: absolute;
        z-index: 100;
}

* html ul#pulldown-menu li:hover ul {
        vertical-align: bottom; /* IE6 で変な隙間が空くのでその対策 */
}

ul#pulldown-menu li:hover ul li ul {
        display: none;
}

/* 疑似要素 :hover で孫メニューを可視に */
ul#pulldown-menu li ul li:hover ul {
        display: block;
        position: absolute;
        top: 0;
        left: 9em;
        z-index: 200;
}

通常状態では 2 階層目と 3 階層目の ul を display: none; で不可視（ボックス非生成）にしています。
疑似クラスの :hover を 1 階層目の li に指定して、マウスオーバーすると 2 階層目の ul が可視（ボックス生成）されるようになり、2 階層目の li にも疑似クラスの :hover を指定して、マウスオーバーで 3 階層目の ul が可視されるようになっています。

以下は前回同様 IE6 の対処方法です。

IE6 でもプルダウンメニューを実現する方法

IE6 では a 要素以外の疑似クラスが適用されないため、そのままでは IE6 でプルダウンが表示されません。

そこで、IE6 対策で以下のコンポーネントを使用しています。

• whatever:hover

IE 独自の behavior プロパティを使って、IE6 でも DHTML でプルダウンを実現します。

1. 上記のサイトから「csshover.htc」をダウンロード
2. サーバの任意の場所にダウンロードした htc ファイルを置く
3. CSS に behavior プロパティを追加して、置いた htc ファイルまでのパスを既述（HTML からのパスになるので注意）

ul#pulldown-menu { /* IE6 対策 */
        behavior: url("csshover.htc");
}