CSS | Webnist Blog

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

前回の[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;
}