かっこいいメニューを目指して - 連続発破のはっぱ日記

CSS3 Dropdown Menu by Web Designer Wall
JavaScriptを使わず、CSS3で作るクールな多段メニュー | エンタープライズ | マイコミジャーナル
上のような記事を見ていて、現在JavaScriptを使ってなんとか表示しているぱずぷれv3のメニューを、
CSS3だけでかっこよく表示できないかなぁと思って作ってみました。
最新のIE以外のブラウザだと、だいたいこのような表示になります。IE9は確認できてません。。
なお、クリックしても特に何も起こりません。
　
はっぱメニュー (IE7切り捨て版)
はっぱメニュー IE7妥協版
 はっぱメニュー button要素版 ※li要素をbutton要素にしただけ。おまけ。
以下、TOPからは続きを読むにして、いろいろ箇条書きで。
　
対応ブラウザなどについて

工夫した点

TYPE1とTYPE2の違いはHTML上で5行(menu要素の段数が1つ増えた)、CSSでも7項目です
Firefox 3.5+, Opera 10.5xは(-moz-)box-shadowのinset指定を使ってグラデーションのように見せてます
Safariはinsetが使用できず、外側の影まで消えてしまうので、-webkit-linear-gradientを使用してメニュー内の影を表示しています
Google Chrome 4.1ではinsetは使用できますが、border-radiusの部分に影の色がついて表示が変なので-webkit-linear-gradientを使用しています
menuの一番上のcaptionは、:before擬似クラスでlabel属性を表示し、text-shadowプロパティを使って周りに黒色の影を表示しています
角丸はmenu要素とli要素のborder-radiusの組み合わせで表現しています
下部にメニューがあることを示す->は、li:before擬似クラス＋float:rightで表現しています
menu要素へのmin-width指定とspan要素のwhite-space:nowrap;を組み合わせることで、横幅が可変になっています

IE7妥協版の変更点・制限事項

menuのタイトルを:before擬似クラスではなく1要素目にspanタグを入れることで対応しています
HTML4.01ではmenuタグの子要素はliタグのみ許可、HTML5はmenu要素直下のspan要素は表示されないらしいので、マークアップ的にイマイチです
:first-childで指定していた角丸は:nth-child(2)で設定しています
hr要素で指定していたセパレータは、直後のli要素のスタイルにmargin-topプロパティを指定することで何とかしています
下部にメニューがあることを示す->は、:before擬似クラスが使用できないので直接書いてます
menuがかぶった場合、IE7ではli要素が下部メニューのmenuの上にレンダリングされる？ので、横幅に大きな値を指定して固定幅にし、重ならないようにしています
全体的に、マークアップのお行儀が悪いです
IE6

将来への課題