スタイルシートで実装するプルダウンメニュー

前回のCSSスタイルシートで実装するアコーディオンエフェクト:IE6対応ところ紹介したGoogle コードを利用して、
DesignWalkerさんで紹介されていました
Scriptを使わないCSSエフェクト、Tipsいろいろの中のCSS-only Drop-down MenusをIE6対応で作ってみました。
すでにあったらすみません。

デモ1
デモ：アコーディオン応用

デモ1のソース
HTML

<ul id=”nav”>
	<li><a href=”#” mce_href=”#”>nav_01</a>
		<ul>
			<li><a href=”#” mce_href=”#”>nav_01_01</a></li>
			<li><a href=”#” mce_href=”#”>nav_01_02</a></li>
			<li><a href=”#” mce_href=”#”>nav_01_03</a></li>
			<li><a href=”#” mce_href=”#”>nav_01_04</a></li>
		</ul>
	</li>
	<li><a href=”#” mce_href=”#”>nav_02</a>
		<ul>
			<li><a href=”#” mce_href=”#”>nav_02_01</a></li>
			<li><a href=”#” mce_href=”#”>nav_02_02</a></li>
			<li><a href=”#” mce_href=”#”>nav_02_03</a></li>
			<li><a href=”#” mce_href=”#”>nav_02_04</a></li>
			<li><a href=”#” mce_href=”#”>nav_02_05</a></li>
			<li><a href=”#” mce_href=”#”>nav_02_06</a></li>
			<li><a href=”#” mce_href=”#”>nav_02_07</a></li>
			<li><a href=”#” mce_href=”#”>nav_02_08</a></li>
		</ul>
	</li>
	<li><a href=”#” mce_href=”#”>nav_03</a>
		<ul>
			<li><a href=”#” mce_href=”#”>nav_03_01</a></li>
			<li><a href=”#” mce_href=”#”>nav_03_02</a></li>
		</ul>
	</li>
	<li><a href=”#” mce_href=”#”>nav_04</a>
		<ul>
			<li><a href=”#” mce_href=”#”>nav_04_01</a></li>
		</ul>
	</li>
</ul>
<hr />

CSS

#nav li
	{
	width:200px;
	background:#DDDDDD;
	float:left;
	}
#nav li > ul
	{
	display:none;
	}
#nav li:hover > ul
	{
	display:block;
	}
#nav li ul li
	{
	width:185px;
	padding:0px 0px 0px 15px;
	display:block;
	}
#nav li ul li:hover
	{
	background:#AAAAAA;
	display:block;
	}

デモ：アコーディオン応用
HTML

<ul id=”nav”>
	<li class=”nav_01″><a href=”#”>nav_01</a>
		<ul>
			<li><a href=”#”>nav_01_01</a></li>
			<li><a href=”#”>nav_01_02</a></li>
			<li><a href=”#”>nav_01_03</a></li>
			<li><a href=”#”>nav_01_04</a></li>
		</ul>
	</li>
	<li class=”nav_02″><a href=”#”>nav_02</a>
		<ul>
			<li><a href=”#”>nav_02_01</a></li>
			<li><a href=”#”>nav_02_02</a></li>
			<li><a href=”#”>nav_02_03</a></li>
			<li><a href=”#”>nav_02_04</a></li>
			<li><a href=”#”>nav_02_05</a></li>
			<li><a href=”#”>nav_02_06</a></li>
			<li><a href=”#”>nav_02_07</a></li>
			<li><a href=”#”>nav_02_08</a></li>
		</ul>
	</li>
	<li class=”nav_03″><a href=”#”>nav_03</a>
		<ul>
			<li><a href=”#”>nav_03_01</a></li>
			<li><a href=”#”>nav_03_02</a></li>
		</ul>
	</li>
	<li class=”nav_04″><a href=”#”>nav_04</a>
		<ul>
			<li><a href=”#”>nav_04_01</a></li>
		</ul>
	</li>
</ul>
<hr />

CSS

nav li.nav_01 ,
#nav li.nav_02 ,
#nav li.nav_03 ,
#nav li.nav_04
	{
	width:200px;
	height:15px;
	overflow:hidden;
	background:#DDDDDD;
	float:left;
	}
#nav li.nav_01:hover
	{
	height:80px;
	}
#nav li.nav_02:hover
	{
	height:145px;
	}
#nav li.nav_03:hover
	{
	height:50px;
	}
#nav li.nav_04:hover
	{
	height:35px;
	}
#nav li.nav_01 li ,
#nav li.nav_02 li ,
#nav li.nav_03 li ,
#nav li.nav_04 li
	{
	padding:0px 0px 0px 15px;
	}
#nav li.nav_01 li:hover ,
#nav li.nav_02 li:hover ,
#nav li.nav_03 li:hover ,
#nav li.nav_04 li:hover
	{
	background:#AAAAAA;
	}

デモの2番目の方は使い道は少ないと思います。
また、文字サイズの拡大に対応してません・・・。