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

ドロップダウンメニューを作る方法

今回は、CSSだけでドロップダウンメニューを作る方法を解説していきます。

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

メガメニューが知らない方はこちらをどうぞ。
【CSSだけでできる】メガメニューを作る方法【コピペOK】

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

完成イメージ

CSSだけでドロップダウンメニューを作る方法

[code_balloon position=”left” name=”ゆうが” text=”メガメニューにとても似てますね!” img=”https://yuuuugablog.com/wp-content/uploads/2020/11/yuga_Original-1.jpg”]

それでは、さっそくいきましょう!

スポンサーリンク

ドロップダウンメニューの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>

スポンサーリンク

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

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;
}

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

BoostNoteに保存しておくと便利

最後になりますが、今回のドロップダウンメニューの作り方を「BoostNote」に保存しておくと、後で使う時にいつでも引き出せるので超便利です。

詳しくはこちらの記事【神アプリ】web制作で使える便利ツールは、BoostNoteで決まりで解説しているので、読んでみてください。

[sc_blogcard url=”https://yuuuugablog.com/programming/boostnote”]

今回は以上です!
参考になれば幸いです。