前回のCSSスタイルシートで実装するアコーディオンエフェクト:IE6対応ところ紹介したGoogle コードを利用して、
DesignWalkerさんで紹介されていました
Scriptを使わないCSSエフェクト、Tipsいろいろの中のCSS-only Drop-down MenusをIE6対応で作ってみました。
すでにあったらすみません。
デモ1
デモ：アコーディオン応用
デモ1のソース
HTML
[xhtml]
[/xhtml]
CSS
[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;
}
[/css]
デモ：アコーディオン応用
HTML
[xhtml]
[/xhtml]
CSS
[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;
}
[/css]
デモの2番目の方は使い道は少ないと思います。
また、文字サイズの拡大に対応してません・・・。