ヘッダーの子メニューをプルダウン表示させる際に私が犯した過ち

ブログに新しいカテゴリ「お勉強」を追加しました。

同僚が入社して以来、教わることが毎日山ほど出てくるのに対し
私から教えられるのは過去のデータの在処と社長の好きな女性のタイプくらいだという事実を憂慮し
せめて勉強しているパフォーマンスに励もうとした末の決断です。

今日のお勉強内容。

ヘッダーに親メニューを横並びに配置し、更に各メニューにマウスカーソルを当てると下に子メニューが出現。
プルダウンメニューを表示させる方法は山ほどありますが、今回の問題はそこじゃありません。
上の例だと、親メニューが何なのか、パッと見てもわからないのです。

[css]
ul.menu li a {
display: block;
color: #fff;
text-align: center;
background-color: #1cbfbf;
}
ul.menu li a:hover {
background-color: #077e7e;
}
[/css]

理由は、a:hoverで背景色が変わるように指定しているから。
該当する親メニューにマウスカーソルが当たっていても、消えてしまうのです。

このCSSを、下記のものに修正。

[css]
ul.menu li a {
color: #fff;
text-align: center;
background-color: #1cbfbf;
}
ul#main-menu > li:hover a {
background-color: #077e7e;
}
ul#main-menu li:hover > ul {
display: block;
}
[/css]

a:hover → li:hover a
そして li:hover に display:block を設定。

恐らくほとんどのコーダーさんが当たり前のように実行してらっしゃることかと思います。
今まで思いも寄らなかったのが恥ずかしいのですが、人生とは日々勉強するもので、その順番は人それぞれなのだと自分に言い訳をしておきます。

【ハートブレーン】https://blog.heart-kokoro.net