[css]cssだけでプルダウンメニューを実装する

「マウスオーバー時に低階層メニューを表示する」ってギミックに限り、
アニメーションとかいらないってなら、
jsとか使わないでcssだけで作ったほうが楽だった。
多分今後もやっていく。

こう作る

メニュー自体のデザインは今回省く。
キモのところだけ。

「マウスオーバーしたliに入ってるulを表示する」がこれでできる。

下階層のあるliに対しての装飾例

「子メニューは下に生えてくるよ」
「孫メニュー以下は右に生えてくるよ」
ってアイコンをつけるとすると、例えばこんな感じ。

まとめ

わざわざ記事にしなくても「>」の使い方がわかってれば誰でも思いつく方法ではある。
当然というか、スマホとかタブレットにはマウスオーバーは不向きなので別の手段が必要。