ほぼCSSのみで作る縦型プルダウンメニュー

20095月26

確認ブラウザは IE7、Firefox2、Opera9、Safari3.1 です。
CSS のみでは IE6 対応が不可能ですが、IE の独自機能（DHTML）を併用することで IE6 でもプルダウンメニューを実現しています。
[使える CSS テクニック] CSSで実現するプルダウンメニュー – バシャログ。

こちらで紹介されているソースを利用して、縦型のプルダウンメニューを作成してみました。少しだけソースをいじって、カーソルを合わせたときに右側にメニューが表示されるようにしています。

サンプルとして、HTMLとCSSを紹介しておきます。

HTML

<div id="pulldownmenu">
	<ul>
		<li class="top"><a href="">トップページ</a></li>
		<li class="kind">スポーツ
			<ul>
				<li class="kindtop"><a href="">野球</a></li>
				<li><a href="">サッカー</a></li>
				<li><a href="">バスケ</a></li>
			</ul>
		</li>
		<li class="kind">食べ物
			<ul>
				<li class="kindtop"><a href="">カレー</a></li>
				<li><a href="">ラーメン</a></li>
				<li><a href="">ステーキ</a></li>
			</ul>
		</li>
	</ul>
</div>

CSS

div#pulldownmenu {
	width:200px;
}
div#pulldownmenu ul { /* IE6 対策 */
	behavior:url("csshover.htc");
}

div#pulldownmenu ul a {
	color:#FFFFFF;
	text-decoration: none;
	font-size:small;
}
div#pulldownmenu ul a:link,
div#pulldownmenu ul a:visited {
	background: #fff;
	color:#0099FF;

}
div#pulldownmenu ul a:hover,
div#pulldownmenu ul a:active {
	background-color:#fff;
	color:#FF6600;
}

div#pulldownmenu ul li {
	float:left;
	position: relative;
	width:194px;
	height:1.5em;
	margin: 0;
	font-weight:bold;
	color:#0099FF;
	border-left:5px solid #FF66FF;
	border-bottom:1px solid #999999;
	border-right:1px solid #999999;
}
div#pulldownmenu ul li.kind{
	width:184px;
	padding:5px 0 2px 10px;
}
div#pulldownmenu ul li.top {
	border-top:1px solid #999999;
	font-size:medium;
	padding:2px 0 0 0;
}
div#pulldownmenu ul li:hover,
div#pulldownmenu ul li:active {
	background-color:#fff;
	border-left:5px solid #0099FF;
	border-bottom:1px solid #999999;
	border-right:1px solid #999999;
	color:#FF6600;
}
div#pulldownmenu ul li a {
	display: block;
	font-weight:bold;
	height:1.5em;
	color:#000000;
	padding:0 0 0 10px;
}

/* 下層のメニューを不可視に */
div#pulldownmenu ul li ul {
	display: none;
}

/* 疑似要素 :hover で下層のメニューを可視に */
div#pulldownmenu ul li:hover ul {
	display: block;
	position:absolute;
	z-index:100;
	left:180px;
	top:0px;
}
* html div#pulldownmenu ul li:hover ul {
	display: block;
	position:absolute;
	z-index:100;
	left:190px;
	top:0px;
}
div#pulldownmenu ul li ul li{
	float:none;
	width:130px;
	margin: 0;
	background:#fff;
	padding:3px 0 0 0;
}
div#pulldownmenu ul li ul li.kindtop{
	border-top:1px solid #999999;
}
div#pulldownmenu ul li ul li a{
	float:none;
	font-size:small;
	font-weight:bold;
	background:#fff;
}

このサンプルでは、プルダウンを表示するメニュー（スポーツと食べ物）をリンクしていないため、aタグが付いていないhoverを使って、レイアウトを調節しています。

また、このコードだけではIE6で表示がうまくいかないため、DHTMLを利用するファイルを別途アップロードする必要があります。詳しくは上記リンク先をご覧ください。