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

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

完成イメージ

上記のようなドロップダウンメニューを実装していきます。

[box class=”box30″ title=”本記事のもくじ”]

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

[/box]

この記事を書いた人

滝田裕雅

ゆうがブログ運営者・ブロガー

「正しい知識を正しく届ける。」を理念にサイトを運営しています。その分野の専門家の記事や論文、私の実体験をもとに情報に誤りのない記事を作成しています。プロフィールの詳細＆記事編集ポリシーはこちら

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

[codebox title=”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>

[/codebox]

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

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

[codebox title=”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 title=”MEMO”].menu a:hoverのbackgroundの#を「blue」や「white」にすると背景色を変えられます。[/memo]

以上でドロップダウンメニューを実装することができます。

BoostNoteに保存しておくと便利

最後になりますが、今回のドロップダウンメニューを「BoostNote」というエンジニアのメモ帳に保存しておくと、いつでも引き出せるので便利です。
詳しくは下記の記事で解説しています。

[kanren id=”1399″]

[sen]