【レイアウト構成】番外編：ドロップダウンメニューの練習

コーディング練習レイアウト構成ソースコードデモ

レイアウト構成

サイト全体のレイアウト構成

コーディングのヒント!

全体をheaderタグで囲みます。

タイトル: h1タグで記述します。
ドロップダウンメニュー: 全体をnavタグで囲み、メニュー部分をul、liのリストタグで横並びに配置します。
liタグの中に、さらにul、liタグでドロップダウン用のサブメニューを作ります。
サブメニューは、初期状態では表示しないため「visibility: hidden;」で非表示に設定しておき、ホバー時に「visibility: visible;」で表示します。
サブメニューの位置は、positionを使って設定します。シングルメニューはliタグを基準に、ワイドメニューはmenu全体のulタグを基準に設定します。

コーディング練習メニューに戻る

【HTML/CSS コーディング練習】番外編：ドロップダウンメニューの練習

関連記事

コーディング練習一覧