2021-05-07

【HTML & CSS】ドロップダウンメニューを作成する方法。hover で表示。

CSS,HTML,プログラミング

こんにちは、ダイキです。
今回は、HTML と CSS だけでドロップダウンメニューを作成したいと思います。
hover したら表示するという簡単なものとなっています。

HTMLです。【HTML & CSS】ドロップダウンメニューを作成する方法。hover で表示。


<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav class="gNav">
    <ul class="firstStage">
      <li><a href="#">メニュー1</a></li>
      <li>
        <a href="#">メニュー2</a>
        <ul class="secondStage">
          <li><a href="#">メニュー2-1</a></li>
          <li><a href="#">メニュー2-2</a></li>
          <li><a href="#">メニュー2-3</a></li>
          <li>
            <a href="#">メニュー2-4</a>
            <ul class="threeStage">
              <li><a href="#">メニュー2-4-1</a></li>
              <li><a href="#">メニュー2-4-2</a></li>
              <li><a href="#">メニュー2-4-3</a></li>
            </ul>
          </li>
          <li><a href="#">メニュー2-5</a></li>
        </ul>
      </li>
      <li><a href="#">メニュー3</a></li>
      <li><a href="#">メニュー4</a></li>
      <li><a href="#">メニュー5</a></li>
    </ul>
  </nav>

  <script src="script.js"></script>
</body>

</html>

CSSです。【HTML & CSS】ドロップダウンメニューを作成する方法。hover で表示。


body {
  margin-top: 100px;
}

/* すべてのリスト・リンク 共通 */
.gNav ul {
  padding: 0;
}
.gNav ul li {
  position: relative;
  list-style: none;
  border-right: 1px solid #ddd;
}
.gNav ul li a {
  display: block;
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  background-color: #333;
  color: #fff;
  text-align: center;  
  text-decoration: none;
}

/* 一段目 ナビメニュー */
.gNav .firstStage {
  display: flex;
  width: 1000px;
  height: 2rem;
  margin: 0 auto;
}
.gNav .firstStage > li {
  width: 25%;
}

/* 二段目以降 共通 */
.gNav li li {
  height: 0;
  overflow: hidden;
  transition: .5s;
}
.gNav li li a {
  border-top: 1px solid #ddd;
}
.gNav li:hover > ul > li {
  height: 2rem;
  overflow: visible;
}

/* 三段目以降 共通 */
.gNav li ul li ul {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
}