<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--ul-li:hover .gnav_mega {
  /* トランジション後 */
  display: block;
  opacity: 1;

  /* トランジション前 */
  @starting-style {
    /* ここにdisplay:none;は書かない */
    opacity: 0;
  }
}

.gnav_mega {
  display: none; /* ここにdisplay:none; */
  opacity: 0; /* フェードアウト用 */
  transition: opacity 0.3s, display 0.3s allow-discrete; /* allow-discreteでdisplayがトランジション可能に */
}

/* ======================
レイアウト・装飾用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;
}