8/10 ドロップダウンメニューとは？HTML＋CSSだけで簡単に作る方法 [ホームページ作成] All About

2-B. 3段以上のドロップダウン機能を実現するCSSソース

それでは、前ページで作成したリストがメニューらしく見えるように、CSSソースを記述しましょう。

■CSSソース(前半)：
まずは、メインメニュー部分全体を装飾するCSSソースと、1階層目のサブメニューを装飾するCSSソースを書きます。このソースは「2段階のドロップダウンメニュー」を作った際と全く同じです。

/* -------------------- */
/* ▼メニューバーの装飾 */
/* -------------------- */
ul.ddmenu {
   margin: 0px;               /* メニューバー外側の余白(ゼロ) */
   padding: 0px 0px 0px 15px; /* メニューバー内側の余白(左に15px) */
   background-color: #cc0000; /* バーの背景色(濃い赤色) */
}

/* -------------------------- */
/* ▼メインメニュー項目の装飾 */
/* -------------------------- */
ul.ddmenu li {
   width: 125px;          /* メニュー項目の横幅(125px) */
   display: inline-block; /* ★横並びに配置する */
   list-style-type: none; /* ★リストの先頭記号を消す */
   position: relative;    /* ★サブメニュー表示の基準位置にする */
}
ul.ddmenu a {
   background-color: #cc0000; /* メニュー項目の背景色(濃い赤色) */
   color: white;              /* メニュー項目の文字色(白色) */
   line-height: 40px;         /* メニュー項目のリンクの高さ(40px) */
   text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
   text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
   font-weight: bold;         /* 太字にする */
   display: block;            /* ★項目内全域をリンク可能にする */
}
ul.ddmenu a:hover {
   background-color: #ffdddd; /* メニュー項目にマウスが載ったときの背景色(淡いピンク) */
   color: #dd0000;            /* メニュー項目にマウスが載ったときの文字色(濃い赤色) */
}

/* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
ul.ddmenu ul {
   margin: 0px;         /* ★サブメニュー外側の余白(ゼロ) */
   padding: 0px;        /* ★サブメニュー内側の余白(ゼロ) */
   display: none;       /* ★標準では非表示にする */
   position: absolute;  /* ★絶対配置にする */
}

上記の各部分に対する解説は、「2段階のドロップダウンメニュー」を装飾する書き方として本記事の3ページ目～4ページ目に掲載しましたので、ここでは割愛します。

■表示例：
この時点での表示は下図の通りです。メインメニュー部分は動作しますが、サブメニュー以下の部分はまだ動作しません。

メインメニュー項目だけが表示される

■CSSソース(後半)：動的にメニュー項目を開閉する
次に、サブメニューや孫メニューを開閉するためのCSSソースを加えましょう。この記述は、「2段階のドロップダウンメニュー」とは少しだけ異なります。

/* ---------------------------------- */
/* ▼サブメニューがある場合に開く処理 */   /* ※サブメニューが2階層以上ある場合の記述 */
/* ---------------------------------- */
ul.ddmenu li:hover > ul {
   display: block;         /* ★マウスポインタが載っている項目の内部にあるリストを表示する */
}

上記のように「li:hover」と「ul」との間に「>」記号があります。CSSのセレクタに使う「>」記号は「子セレクタ」と呼ばれ、直接の子要素だけに限定して装飾ができます。

その結果、

1階層目のメニュー項目にマウスが載っている場合は、2階層目のメニューだけが開く
2階層目のメニュー項目にマウスが載っている場合は、3階層目のメニューだけが開く

……という動作が実現できます。
この「>」記号を書かなかった場合は、1階層目のメニュー項目にマウスを載せた時点で、2階層目以降の全ての階層のサブメニューが一気に開いてしまいます。

■表示例：
ここまでのソースを表示すると下図のように見えます。サブメニューのある項目の上にマウスポインタを載せると、サブメニューが表示されます。マウスを外せばサブメニューは消えます。ここまでは問題ありません。しかし、下図右側のように、3階層目(孫メニュー)以降の表示は今の時点ではうまくいきません。

サブメニューはうまく表示されるが、孫メニューには問題がある

3階層目以降がうまく表示されないのは、3階層目以降に対しても「サブメニューを下方向に表示する」というスタイルが適用されてしまうからです。サブメニュー(2階層目)は下方向に表示するので問題ありませんが、孫メニュー(3階層目)以降は横方向に表示しなければなりません。

それでは次に、3段以上のドロップダウンメニューで、3階層目以降のメニュー群を装飾するCSSソースの書き方を見ていきましょう。

【本記事(後半)の目次】