Headless Mega Menu & Mega Menu Flyout

• Show/hides megamenu on mouse hover
• Show/hides megamenu with toggle button using keyboard navigation
• Closes megamenu using Escape key
• Sets correct aria-expanded and aria-haspopup values

<header class="relative">
  <nav>
    <ul role="menubar">
      <mega-menu>
        <li role="none">
          <a role="menuitem" href="/test">Item 1</a>
          <button
            aria-expanded="false"
            class="-translate-y-999 focus-visible:translate-y-0"
          >
            ⌄
          </button>
        </li>
        <div class="invisible absolute top-full left-0">
          <div>
            <ul>
              <li>
                <a href="/">Sub item 1</a>
              </li>
              <li>
                <a href="/">Sub item 2</a>
              </li>
            </ul>
          </div>
        </div>
      </mega-menu>
    </ul>
  </nav>
</header>