【CSS】CSSで作るプルダウン/ドロップダウンメニュー【初心者】

CSS初心者でも簡単に実装できるプルダウンメニュー（ドロップダウンメニュー）を、サンプル付きで紹介します。

CSSで作るプルダウンメニューサンプル

CSSソース

CSSの構成

CSSは6つのブロックに分かれます。それぞれの説明は次の通りです。

1. 全体の設定です。メニューとなるULタグにIDとして設定します。
2. メインメニューを横並びにする設定です。
3. aタグに対して装飾します。影響範囲はメインメニューとサブメニューの両方です。
4. マウスオーバーの設定です。単純に背景色を変更する設定をしています。
5. サブメニューの設定です。ULタグです。デフォルトで非表示にしています。
6. サブメニューをマウスオーバーで表示する設定です。

ポイントは3のaタグの装飾です。

フォントサイズを決めたり、全体のイメージカラーなどもここで設定します。

HTMLのソース

HTMLの解説

div class = wrapper で width:600px; の真ん中寄せにしています。

HTMLのポイントはメニューの幅とfloatの解除です。

メニューの幅

まずメニューの幅は　widthが130pxでpaddingが10pxついてるので、一つのメニューの幅が150pxとなります。

メニューは4つなので合計600px。wrapperのwidthも600pxなので隙間なくぴったりとなります。

float解除

ulタグを閉じた後のDivでfloatを解除しています。

通常clearfixを使うところですが、わかりやすさを優先してDivタグ使ってみました。

見出しh1との距離はこのheightで設定しています。

height:0;にすると隙間をなくすこともできます。

まとめ

CSSで実装するプルダウンメニューを紹介しました。

ソースをコピーすれば、初心者でも作成できると思います。