jQueryを使用したアコーディオンメニュー
Mac IE5.2には対応していません。

確認済ブラウザ:
Mac Firefox12.0／Mac Opera9／
Mac Safari5.3／Mac IE5.2／
Mac Google Chrome8.0

実験場TOPに戻る

CSSはこんな感じ
/* 以下設定 */
ul#menu, ul#menu ul{
list-style-type:none;
margin:0;
padding-left:5px;
width:190px;
}
ul#menu a {
display:block;
text-decoration:none;
}
ul#menu li {
margin-top:0px;
}
ul#menu li a {
background-color:#57080F;
color:#fff;
padding:0.2em;
}
ul#menu li a:hover {
background:#000;
}
ul#menu li ul li a {
background-color:#57080F;
color:#FFF;
padding-left:20px;
}
ul#menu li ul li a:hover{
background-color:#CCCCCC;
border-left:5px #000 solid;
padding-left:20px;
}
HTMLのソースはこんな感じ
わかりやすいように色を分けています。
　　<ul id="menu">
　　　<li><a href="#">サンプル１</a>
　　<ul>
　　　<li>アコーディオンメニュー　</li>
　　</ul>
　　　</li>
　　　<li><a href="#">サンプル２</a>
　　<ul>
　　　<li><a href="#">ああああ</a></li>
　　　<li><a href="#">いいいい</a></li>
　　</ul>
　　　</li>
　　　<li><a href="#">サンプル３</a>
　　<ul>
　　　<li><a href="#">ああああ</a></li>
　　　<li><a href="#">いいいい</a></li>
　　　<li><a href="#">うううう</a></li>
　　　<li><a href="#">ええええ</a></li>
　　　<li><a href="#">おおおお</a></li>
　　</ul>
　　　</li>
　　　<li><a href="#">サンプル４</a></li>
　　<ul>
　　　<li><a href="#">ああああ</a></li>
　　　<li><a href="#">いいいい</a></li>
　　　<li><a href="#">うううう</a></li>
　　　<li><a href="#">ええええ</a></li>
　　　<li><a href="#">おおおお</a></li>
　　</ul>
　　　</li>
　　　<li><a href="#">サンプル５</a></li>
　　　<li><a href="#">サンプル６</a></li>
　　<ul>
　　　<li><a href="#">ああああ</a></li>
　　　<li><a href="#">いいいい</a></li>
　　　<li><a href="#">うううう</a></li>
　　</ul>
　　　</li>
　　</ul>