htmlとcssのみで簡単ドロップダウンメニュー

ナビゲーションのメニュー項目の上にマウスポインターを置くと、更に下にサブメニューが表示される「ドロップダウンメニュー」を、出来るだけ簡単にhtmlとcssのみで製作してみる。

まずはhtml。
普通のhtmlです。

あくまで普通なリストを入れ子にしたメニューですね。

お次はCSS

ちょっと余分なもの(リセットスタイルを使っていない為)もあるけど、こんな感じ。

ここでの要点は、終盤の

この前にli ulのサブメニュー部分をdisplay: none;で非表示にしておいて、

ul li:hover > ul

li:hover liにマウスポインタが乗った時の

> 直下の要素の

ul ul(ここではサブメニュー本体)

をdisplay:block;で表示させるということになります。

サブメニュー部分は親のliに含まれているのでサブメニュー部分にマウスポインターを移動しても:hoverの状態は継続されているのでサブメニューが消えずに表示されます。

 

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ WordPressへ にほんブログ村 IT技術ブログ Webサイト構築へ

投稿者: おーあえ

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください