<nav class="gnav" id="gnav">
  <ul class="gnav--ul">
    <li class="gnav--ul-li">
      <a href="#">メニュー1</a>
      <div class="gnav_mega">
        <ul class="gnav_mega--ul">
          <li class="gnav_mega--ul-li">
            <a href="#">メニュー1の1</a>
          </li>
          <li class="gnav_mega--ul-li">
            <a href="#">メニュー1の2</a>
          </li>
          <li class="gnav_mega--ul-li">
            <a href="#">メニュー1の3</a>
          </li>
        </ul>
      </div>
    </li>
    <li class="gnav--ul-li">
      <a href="#">メニュー2</a>
      <div class="gnav_mega">
        <ul class="gnav_mega--ul">
          <li class="gnav_mega--ul-li">
            <a href="#">メニュー2の1</a>
          </li>
          <li class="gnav_mega--ul-li">
            <a href="#">メニュー2の2</a>
          </li>
          <li class="gnav_mega--ul-li">
            <a href="#">メニュー2の3</a>
          </li>
        </ul>
      </div>
    </li>
    <li class="gnav--ul-li">
      <a href="#">メニュー3</a>
      <div class="gnav_mega">
        <ul class="gnav_mega--ul">
          <li class="gnav_mega--ul-li">
            <a href="#">メニュー3の1</a>
          </li>
          <li class="gnav_mega--ul-li">
            <a href="#">メニュー3の2</a>
          </li>
          <li class="gnav_mega--ul-li">
            <a href="#">メニュー3の3</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

.gnav_mega {
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.gnav--ul-li:hover .gnav_mega {
  opacity: 1;
  visibility: visible;
}

/* ======================
レイアウト・装飾用CSS
======================*/
.gnav {
  background: #333;
}
.gnav--ul {
  display: flex;
  justify-content: center;
  position: relative;
}
.gnav--ul-li > a {
  color: #fff;
  display: block;
  padding: 20px 30px;
  text-decoration: none;
  transition: 0.3s;
}
.gnav--ul-li > a:hover {
  background: #2eb7cf;
}
.gnav_mega {
  background: #2eb7cf;
  box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.2);
  width: 100%;
  position: absolute;
  inset: 100% auto auto 0;
}
.gnav_mega--ul {
  display: flex;
  justify-content: center;
}
.gnav_mega--ul-li a {
  color: #fff;
  display: block;
  padding: 20px 30px;
  text-align: center;
  text-decoration: none;
}