HTML – ナビを展開する


HTMLとCSSだけでナビゲーションメニューを展開させる

jQueryを使ったナビゲーションの展開は綺麗、そしてその方法は沢山あるけれど、HTMLとCSSだけでどーやるの?
ってことで調べてみたのでメモ。

項目2つだけど作ってみた。
ナビを展開
条件:展開はhoverの時とする。

HTMLサンプル

HTMLに関しては親リストの中に子リストさらには孫リストを入れていくだけ。
閉じタグの場所に注意。

CSSサンプル

子セレクタ「>」

セレクタを > で区切ると、あるセレクタの直下の階層にある子セレクタを対象にスタイルを適用することができます。

つまり他の所に影響しない。


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL