• Top 1
• Top 2
• Top 3 »
  • Sub 31 »
    • Sub 311
    • Sub 312 »
      • Sub 3121
      • Sub 3122 »
        • Sub 31221
        • Sub 31222
        • Sub 31223
      • Sub 3123
      • Sub 3124
    • Sub 313
  • Sub 32
  • Sub 33 »
    • Sub 331
    • Sub 332 »
      • Sub 3321
      • Sub 3322 »
        • Sub 33221
        • Sub 33222
        • Sub 33223 »
          • Sub 332231
          • Sub 332232
          • Sub 332233
          • Sub 332234
        • Sub 33224
      • Sub 3323
      • Sub 3324
    • Sub 333
    • Sub 334
  • Sub 34
• Top 4
• Top 5

CSSのみで出来たので紹介する。Firefox,Operaでの動作を確認。IE6では階層メニューが出ない。
CSSを利用した階層メニューでポップアップするものはJavaScriptを使用するものが多いが、CSSだけでもここまでできる。普通のメニューのように<ul><li>..で出来ている階層メニューをCSSで階層化する。まずはやり方。

用意するのは下のような、普通のメニュー構造。ちなみにMovableTypeもこんなカテゴリーメニューを生成する。（注：リンクは省いてあり、インデントも、横幅が短くなるように短縮している）。
一番始めのulタグだけidを付ける。

HTML

<ul id=”cssmenu”>
<li><a href=”#”>Top 1</a></li>
<li><a href=”#”>Top 2 »</a>
<ul>
<li><a href=”#”>Sub 31 »</a>
<ul>
<li><a href=”#”>Sub 311</a></li>
<li><a href=”#”>Sub 312</a></li>
</ul>
</li>
<li><a href=”#”>Sub 32</a></li>
<li><a href=”#”>Sub 33</a></li>
</ul>
</li>
<li><a xhref=”#”>Top 4</a></li>
<li><a xhref=”#”>Top 5</a></li>
</ul>

次に、以下のCSSを適用する。CSSを極力短くするようにしたため、全ての階層で同じ幅（width）を適用している。そのため、メニュー項目の文字数が最大のものを計算してwidthを決定しなければいけない。

#cssmenu, #cssmenu ul {
list-style-type:none;
margin:0;
padding:0;
}
#cssmenu, #cssmenu a, #cssmenu a:visited {
background:#AAA none repeat scroll 0%;
border-color:#FFF;
border-style:solid;
border-width:0 1px 1px 0;
color:#000;
font-size:10px;
display:block;
height:25px;
line-height:24px;
text-indent:5px;
width:70px;
text-decoration:none;
}
#cssmenu li {
position:relative;
}
#cssmenu *:hover > a {
background:#525252 none repeat scroll 0%;
color:#EEE;
}
#cssmenu li ul {
display:none;
}
#cssmenu li:hover > ul {
display:block;
left:71px;
position:absolute;
top:0;
}

仕組みについては、また別の機会に解説するが、子要素への適用タグ「>」は非常に便利で、応用範囲が広い。ただし、IE6以下に対応させようとすると、すごく複雑になる。あまり複雑なら、JavaScriptの方が良いかという感じ。