[使える CSS テクニック] CSSで実現するプルダウンメニュー
使える CSS テクニックの第 4 回は「CSS で実現するプルダウンメニュー」です。
確認ブラウザは IE7、Firefox2、Opera9、Safari3.1 です。
CSS のみでは IE6 対応が不可能ですが、IE の独自機能（DHTML）を併用することで IE6 でもプルダウンメニューを実現しています。
まずは、以下のサンプルをご覧ください。
このサンプルの 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></li>
<li><a href="http://c-brains.jp/document/">マニュアル制作</a></li>
<li><a href="http://c-brains.jp/localization/">ローカライズ</a></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></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 は以下です。
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 {
display: none;
}
/* 疑似要素 :hover で下層のメニューを可視に */
ul#pulldown-menu li:hover ul {
display: block;
position: absolute;
z-index: 100;
}
ul#pulldown-menu li ul li {
float: none;
margin: 0;
font-weight: normal;
}
通常状態では 2 階層目の ul を display: none; で不可視（ボックス非生成）にしています。
疑似クラスの :hover を 1 階層目の li に指定して、マウスオーバーすると下層の ul が可視（ボックス生成）されるようになっています。
ただし、この方法には問題があります。
IE6 では a 要素以外の疑似クラスが適用されないため、そのままでは IE6 でプルダウンが表示されません。
そこで、IE6 対策で以下のコンポーネントを使用しています。
IE 独自の behavior プロパティを使って、IE6 でも DHTML でプルダウンを実現します。
- 上記のサイトから「csshover.htc」をダウンロード
- サーバの任意の場所にダウンロードした htc ファイルを置く
- CSS に behavior プロパティを追加して、置いた htc ファイルまでのパスを既述（HTML からのパスになるので注意）
ul#pulldown-menu { /* IE6 対策 */
behavior: url("csshover.htc");
}
ちょっとズルをしましたが、これでほとんどのモダンブラウザに対応したプルダウンメニューを作ることができます。
