番外編：ドロップダウンメニューの練習

Navigation Menu
Menu Single
Menu Wide
Wide Child
Wide Child
Wide Child
Wide Child
Wide Child
Wide Child
Wide Child
Wide Child
Wide Child
Wide Child
Menu Single
Menu Wide

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>【コーディング練習】ドロップダウンメニューの練習</title>
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- .header -->
<header class="header">
  <h1>Navigation Menu</h1>

  <!-- .gnav -->
  <nav class="gnav">
    <ul class="menu">
      <li class="single">
        <a href="#">Menu Single</a>
        <ul class="menu-second">
          <li><a href="#">Single Child</a></li>
          <li><a href="#">Single Child</a></li>
          <li><a href="#">Single Child</a></li>
        </ul>
      </li><!-- /.single -->
      <li class="wide">
        <a href="#">Menu Wide</a>
        <ul class="menu-second">
          <li><a href="#">Wide Child</a></li>
          <li><a href="#">Wide Child</a></li>
          <li><a href="#">Wide Child</a></li>
          <li><a href="#">Wide Child</a></li>
          <li><a href="#">Wide Child</a></li>
          <li><a href="#">Wide Child</a></li>
          <li><a href="#">Wide Child</a></li>
          <li><a href="#">Wide Child</a></li>
          <li><a href="#">Wide Child</a></li>
          <li><a href="#">Wide Child</a></li>
        </ul>
      </li><!-- /.wide -->
      <li class="single">
        <a href="#">Menu Single</a>
        <ul class="menu-second">
          <li><a href="#">Single Child</a></li>
          <li><a href="#">Single Child</a></li>
          <li><a href="#">Single Child</a></li>
        </ul>
      </li><!-- /.single -->
      <li class="wide">
        <a href="#">Menu Wide</a>
        <ul class="menu-second">
          <li><a href="#">Wide Child</a></li>
          <li><a href="#">Wide Child</a></li>
          <li><a href="#">Wide Child</a></li>
          <li><a href="#">Wide Child</a></li>
          <li><a href="#">Wide Child</a></li>
          <li><a href="#">Wide Child</a></li>
        </ul>
      </li><!-- /.wide -->
    </ul>
  </nav>
</header>
<!-- /.header -->
</body>
</html>

@charset "UTF-8";

/* ----------------------------------------
  reset
---------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
  border: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}


/* ----------------------------------------
  body
---------------------------------------- */
body {
  background-color: #f1f1f1;
  color: #333;
  font-size: 12px;
  font-family: 'Poppins', sans-serif;
  line-height: 1.0;
}
@media screen and (min-width: 768px) {
 body {
  font-size: 14px;
 }
}

/* ----------------------------------------
  header
---------------------------------------- */
.header {
 background-color: #fff;
}
  h1 {
  height: 140px;
  line-height: 140px;
  font-size: 26px;
  text-align: center;
  }


/* ----------------------------------------
  nav
---------------------------------------- */
.gnav {
  background-color: #121212;
}
  .menu {
    position: relative;  /* サブメニューの基準 */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: 1000px;
    margin: 0 auto;
    color: #fff;
  }
    .menu > li {
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
    .menu > li:hover {
      background-color: #544c4c;
    }
    .menu a {
      display: block;
    }
    .menu-second {
      visibility: hidden;  /* 非表示にしておく */
    }

/* -------------- single -------------- */
.menu > .single {
  position: relative;  /* .singleを基準 */
}
.single .menu-second {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  background-color: #544c4c;
}
.single .menu-second a:hover {
  opacity: 0.7;
}
.single:hover .menu-second {
  visibility: visible;  /* ホバー時に表示 */
}

/* -------------- wide -------------- */
.wide .menu-second {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  background-color: #544c4c;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.wide .menu-second li {
  text-align: center;
}
.wide .menu-second a:hover {
  opacity: 0.7;
}
.wide:hover .menu-second {
  visibility: visible;  /* 非表示にしておく */
}