CSSだけでドロップダウンメニュー

ナビゲーションのドロップダウンメニューは、JavaScript を使って実現出来ますが、スクリプトをオフにしてブラウジングしている人も居たりするんで、それを CSS だけでやってみた。今、チョロッとやってみただけなんで、微妙な感じかもしれませんが。（しかも、全然クロスブラウザじゃないし...）

やり方としてはいくつかあると思うんですが、今回はサブメニューの表示・非表示をコントロールするために、疑似クラスの hover プロパティを リスト要素に使っています。なんで、hover プロパティをアンカー要素以外に適用出来ない IE なんかでは表示されないんで、あまり使えないかも:-P

リストを横に並べる

元となる (X)HTML のサンプルは、当然の事ながら、ナビゲーション部分をリスト要素でマークアップしてあります。また、全ての要素の margin と padding を 0 にしています。

• サンプル（素の状態）

今回は、ナビゲーションを横に並べた状態のモノを作成するので、トップメニュー（ id="menu" ）のリスト要素を float で横に並べます。後述しますが、リンク要素をブロック化するので、 display: inline; は使いません。

#menu li {
        float:left;
        list-style-type: none;
        text-align: center;
        background-color: #fff;
}

このままでは、サブメニュー（ class="sub" ）も横に並んでしまうので、フロートを解除します。

#menu .sub li {
        clear: left;
}

忘れずに、ナビゲーション以降の要素（今回サンプルでは h3 ）にも clear: left;を。

• サンプル（リストを横に並べる）

リンク要素をブロック化

メニューのクリック領域をボタンのようにするために、アンカー要素を display プロパティでブロック化します。

#menu li a {
        display: block;
        width: 8em;
        height: 2em;
        line-height: 2em;
        text-decoration: none;
        border: 1px solid #ccc;
}

ちょっと補足すると、line-height: 2em; とすることで、ブロック化したリンク要素の文字を縦の中央に配置する事ができます。vertical-align: middle; のような振る舞いが便利で、結構重宝してる方法です。更にマウスオーバー時の色の指定を hover で指定します。

• サンプル（ブロック化した状態）

サブメニューの表示・非表示

まず、サブメニュー（ class="sub" ）のサブメニューを非表示にします。

.sub {
        display: none;
}

次に、トップメニュー（ id="menu" ）にマウスオーバーした時に、非表示にしてあるサブメニュー（ class="sub" ）をブロック化して表示させる指定をして完了です。

#menu li:hover .sub {
        display: block;
        position: absolute;
}

• サンプル（完成　IE未対応）

ポイントは、position: absolute; とする事で、サブメニュー（ class="sub" ）をナビゲーション以降の見出しと本文の上に表示させる事でしょうか。これを指定しないと、サブメニュー表示時に下の見出しと本文がサブメニューの分だけ下にガクっと下がってしまいます。