HTMLとCSSのみでドロップダウンメニューを作成する

WEBサイト制作において『ドロップダウンメニュー』って結構必要になってくる知識だと思います。なので、、まとめます。

具体的な流れは、まずhtmlでリストを作成してから、cssでドロップダウンメニューにしていくという感じです。

ulでリストを作成する

まず最初にドロップダウンリストにしたいリストを作成します。CSSではなく、htmlのみでの作成のため、下記のようにめちゃくちゃ簡易的なリストになります。

    <div class="menu">
      <div class="menu-title">Main Menu</div>
      <div class="sub-menu">
        <ul>
          <li><a href="#">Sub Menu1</a></li>
          <li><a href="#">Sub Menu2</a></li>
          <li><a href="#">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: 1px solid navy;
}

ただこれだとまだ、インデントやリンクを示唆する青色、下線が残っています。そこを直していきましょう。

位置、リンクの色を調整

 /* 上記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

    <div class="menu">
      <div class="menu-title">Main Menu</div>
      <div class="sub-menu">
        <ul>
          <li><a href="#">Sub Menu1</a></li>
          <li><a href="#">Sub Menu2</a></li>
          <li><a href="#">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: 1px solid navy;
}

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/