Mac IE5.2には対応していません。

確認済ブラウザ: Mac Firefox3.6／Mac Opera9／Mac Safari4.0／Mac IE5.2／Windows IE8

参考サイト様：株式会社シーブレイン

CSSはこんな感じ
/* 以下プルダウン設定 */
ul#pulldown-menu{
line-height:0;
}
ul#pulldown-menu li{
display:inline;
}
ul#pulldown-menu a {
color: #FFFFFF;
text-decoration: none;
}
ul#pulldown-menu a:link, ul#pulldown-menu a:visited {
background:#990000;
}
ul#pulldown-menu a:hover, ul#pulldown-menu a:active {
color:#BD9446;
background:#FFFFCC;
}
ul#pulldown-menu li {
float: left;
position: relative;
margin:0;
width:140px;
height:40px;
font-weight:normal;
line-height:2em;
list-style:none;
}
ul#pulldown-menu li a {
display: block;
width:140px;
height:40px;
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;
}
ul#pulldown-menu { /* IE6 対策 */
behavior: url("csshover.htc");
}
HTMLのソースはこんな感じ
わかりやすいように色を分けています。
<ul id="pulldown-menu">
　<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://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://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>
</ul>

実験場TOPに戻る