CSSのみで作るドロップダウンメニュー

2017.03.27

■ポイント

・外側のナビの各項目の中に入れる入れ子構造にする
・疑似クラス:hoverとdisplay:none; display:block;で表示を切り替える

■HTML

<ul id="gNav">
    <li><a>Gナビメニュー</a>
      　<ul id="subNav"> <!--サブナビを入れ子にする -->
           <li><a>サブナビ1</a></li>
           <li><a>サブナビ2</a></li>
           <li><a>サブナビ3</a></li>
        </ul>
    </li>
</ul>

<li><a>Gナビメニュー</a>

</ul>

</li>

</ul>

■CSS

#subNav{
  display:none; /* hoverされるまで非表示にする　*/
}
#gNav li:hover #subNav{
 display:block;　/* Gナビメニューにマウスオーバーした際に表示させる　*/
}

#subNav{

display:none; /* hoverされるまで非表示にする　*/

}

#gNav li:hover #subNav{

display:block;　/* Gナビメニューにマウスオーバーした際に表示させる　*/

}

この記事を見た人は次の記事も見ています。

【DOM】jQureyでリストないの改行箇所のみ行間を狭くする

【jQuery】長い文字列を省略し「…」にする

CSSのみで作るドロップダウンメニュー

この記事を見た人は次の記事も見ています。

コメント

最近の投稿

アーカイブ

RELATED

【css】Transition

第十四回「WordPressサイトなのかHTMLサイトかの判別方法」

第九回「投稿設定のPING送信サービス設定」

親タームと子タームの条件分岐

要素の中身が変更されたとき実行

【DOM】jQureyでリストないの改行箇所のみ行間を狭くする