html

<ul class="megamenu">
  <li class="focus-reset" tabindex="0" aria-label="始まり"></li>
  <li class="megamenu-item has-child" tabindex="0" aria-expanded="false" aria-controls="panel-1" id="tab-1">リスト1
    <ul class="megamenu-childlist" id="panel-1" aria-labelledby="tab-1" aria-hidden="true">
      <li><a href="#">リスト1-1</a></li>
      <li><a href="#">リスト1-2</a></li>
      <li><a href="#">リスト1-3</a></li>
    </ul>
  </li>
  <li class="megamenu-item has-child" tabindex="0" aria-expanded="false" aria-controls="panel-2" id="tab-2">リスト2
    <ul class="megamenu-childlist" id="panel-2" aria-labelledby="tab-2" aria-hidden="true">
      <li><a href="#">リスト2-1</a></li>
      <li><a href="#">リスト2-2</a></li>
      <li><a href="#">リスト2-3</a></li>
    </ul>
  </li>
  <li class="megamenu-item" tabindex="0"><a href="#">普通のリンク</a></li>
  <li class="megamenu-item has-child" tabindex="0" aria-expanded="false" aria-controls="panel-3" id="tab-3">リスト3
    <ul class="megamenu-childlist" id="panel-3" aria-labelledby="tab-3" aria-hidden="true">
      <li><a href="#">リスト3-1</a></li>
      <li><a href="#">リスト3-2</a></li>
      <li><a href="#">リスト3-3</a></li>
    </ul>
  </li>
  <li class="focus-reset" tabindex="0" aria-label="行き止まり"></li>
</ul>

js

const megaMenuItem = document.querySelectorAll(".megamenu-item");
const megaMenuItemHasChild = document.querySelectorAll(".megamenu-item.has-child");
const megaMenuItemHasChildLength = megaMenuItemHasChild.length;
const megaMenuChildList = document.querySelectorAll(".megamenu-childlist");
const focusReset = document.querySelectorAll(".focus-reset");
/* 表示・非表示を司るaria属性値を全て「非表示」の状態にする関数 */
const ariaReset = function () {
  for (let i = 0; i < megaMenuItemHasChildLength; i++) {
    megaMenuItemHasChild[i].setAttribute("aria-expanded", false);
    megaMenuChildList[i].setAttribute("aria-hidden", true);
  }
};
/* メガメニューの各リストにフォーカスが当たった場合 */
megaMenuItem.forEach(function (elem, index) {
  elem.addEventListener("focus", function () {
    // 一旦全リストのariaを非表示に
    ariaReset();
    /* リスト内にメニューを持つ場合のみaria属性値をコントロール */
    if (elem.classList.contains("has-child")) {
      elem.setAttribute("aria-expanded", true);
      document.querySelector(`#${elem.getAttribute("aria-controls")}`).setAttribute("aria-hidden", false);
    }
  });
});
/* メガメニューの終点にフォーカスされた場合にaria属性値を非表示状態に */
focusReset.forEach(function (elem, index) {
  elem.addEventListener("focus", ariaReset);
});

scss

.megamenu {
  display: flex;
  li {
    height: 2rem; //任意の親メニュー高さ
  }
  .has-child {
    transition: 0.4s;
    cursor: pointer;
    & > ul {
      transition: 0.4s;
      transition-delay: 2s; // メニューを閉じる際に遅延をつける場合
      opacity: 0;
      visibility: hidden;
    }
    &:hover,
    &:focus-within {
      & > ul {
        transition: 0.4s;
        opacity: 1;
        visibility: visible;
      }
    }
  }
}