【コピペでできる】CSSでドロップダウンメニューを作る方法

こんにちは、ゆうが（@yuuuugablog）です。

今回はwebサイトで頻繁に使われている、CSSでドロップダウンメニューを作る方法を解説していきます。

ドロップダウンメニューとは？

ドロップダウンメニューとはメガメニューの小さい版で、マウスホバーするとメニューが出てくるデザインのこと。

具体的には、下記のような感じです。

完成イメージ

メガメニューが知らない方は、こちらで解説しているので見てみて下さい。

【CSSだけ】メガメニューを簡単に作る方法【コピペOK】

関連記事【CSSだけでできる】メガメニューを作る方法【コピペOK】

本記事のもくじ

ドロップダウンメニューのHTML
ドロップダウンメニューのCSS
BoostNoteに保存しておくと便利

ドロップダウンメニューのHTML

HTML

<nav>
       <ul class="menu">
          <li>
            <a href="#">MENU1</a>
            <ul class="menu__child">
              <li><a href="#">CHILD1</a></li>
              <li><a href="#">CHILD2</a></li>
              <li><a href="#">CHILD3</a></li>
            </ul>
          </li>
          <li>
            <a href="#">MENU2</a>
            <ul class="menu__child">
              <li><a href="#">CHILD1</a></li>
              <li><a href="#">CHILD2</a></li>
              <li><a href="#">CHILD3</a></li>
            </ul>
          </li>
          <li>
            <a href="#">MENU3</a>
            <ul class="menu__child">
              <li><a href="#">CHILD1</a></li>
              <li><a href="#">CHILD2</a></li>
              <li><a href="#">CHILD3</a></li>
            </ul>
          </li>
          <li>
            <a href="#">MENU4</a>
            <ul class="menu__child">
              <li><a href="#">CHILD1</a></li>
              <li><a href="#">CHILD2</a></li>
              <li><a href="#">CHILD3</a></li>
            </ul>
          </li>
        </ul>
      </nav>

まずはこちらのコードをコピペして、HTMLファイルのほうに貼り付けて下さい。

ドロップダウンメニューのCSS

.menu {
display: flex;
width: 1000px;
padding: 0;
margin: 0 auto;
}
.menu > li {
width: 25%;
}

.menu li {
position: relative;
list-style: none;
}

.menu li a {
padding: 1em 1.5em;
text-decoration: none;
background: #000;
text-align: center;
display: block;
color: #fff;
}
.menu a:hover{
background: #912323;
}

.menu__child li {
height: 0;
overflow: hidden;
transition: 0.3s;
}
.menu ul {
padding: 0;
}

.menu li:hover > ul > li {
height: 3.2rem;
overflow: visible;
}

MEMO

.menu a:hoverのbackgroundの#を「blue」や「white」にすると背景色を変えられます。

ゆうが