WEBサイト制作において『ドロップダウンメニュー』って結構必要になってくる知識だと思います。なので、、まとめます。
具体的な流れは、まずhtmlでリストを作成してから、cssでドロップダウンメニューにしていくという感じです。
ulでリストを作成する
まず最初にドロップダウンリストにしたいリストを作成します。CSSではなく、htmlのみでの作成のため、下記のようにめちゃくちゃ簡易的なリストになります。
<divclass="menu"><divclass="menu-title">Main Menu</div><divclass="sub-menu"><ul><li><ahref="#">Sub Menu1</a></li><li><ahref="#">Sub Menu2</a></li><li><ahref="#">Sub Menu3</a></li></ul></div></div>CSSでドロップダウンにしていく
枠をデザインする
まず大枠を作ります。
main menuおよび、sub menuをちゃんとしたboxにしましょう。
/* まずはメニューの大枠を作る */.menu{width:300px;text-align:center;background:navy;color:white;}.sub-menu{background:white;}/* わかりやすいようにボーダーも */li{border:1pxsolidnavy;}ただこれだとまだ、インデントやリンクを示唆する青色、下線が残っています。そこを直していきましょう。
位置、リンクの色を調整
/* 上記CSSに加えます *//* list-styleでlistの"・"をなくします *//* paddingでインデントもなくします */ul{width:300px;list-style:none;margin:0;padding:0;}/* リンクっぽい青色、下線部をなくす */a{text-decoration:none;color:navy;}いよいよドロップダウン化します
枠組みはできました！ いよいよ、普通はサブメニューを非表示にさせて、マウスホバー時に表示させるCSSを書いていきます。
具体的には、非表示にするsub-menuクラスに「display: none;」を書いておいて、hover時に「display: block;」 に切り替えて表示させるという手順です。
/* sub menuを非表示にする */.sub-menu{display:none;/* ← ここ追加 */background:white;}/* マウスホバー時に表示させる */.menu:hover.sub-menu{display:block;}これで完成！
これが
マウスホバーすると、、、
こうなります！
最終的なコードは
HTML
<divclass="menu"><divclass="menu-title">Main Menu</div><divclass="sub-menu"><ul><li><ahref="#">Sub Menu1</a></li><li><ahref="#">Sub Menu2</a></li><li><ahref="#">Sub Menu3</a></li></ul></div></div>CSS
.menu{width:300px;text-align:center;background:navy;color:white;}.sub-menu{background:white;display:none;}li{border:1pxsolidnavy;}ul{width:300px;list-style:none;margin:0;padding:0;}a{text-decoration:none;color:navy;}.menu:hover.sub-menu{display:block;}参考:https://public-constructor.com/html-css-dropdown-menu/
なんかうまくできなかった時はこちら
http://webfeelfree.com/mouseover-css-hover/