我正在嘗試使用 Tailwind CSS 和 Alpinejs 創(chuàng)建一個在懸停時觸發(fā)的超級菜單。我有點讓它工作，但它真的有問題。我嘗試將 x-on:mouseleave 添加到不同的元素，但它會不斷閃爍或僅在離開某些區(qū)域時才消失。所以它要么在菜單下方移動時消失，要么在菜單上方移動時消失，反之亦然。任何見解將不勝感激！https://codepen.io/kennyk3/pen/yLJmzYJ<div class="bg-blue-800 hidden md:block">  <div class="max-w-screen-xl mx-auto">    <nav class="flex items-center justify-between flex-wrap">      <div class="w-full block flex-grow md:flex md:items-center md:w-auto">        <div class="font-bold md:flex-grow">          <ul class="flex justify-between">            <li>              <a href="#" class="block p-4 text-blue-100 hover:bg-blue-900 transition duration-500">LINK</a>            </li>            <li>              <a href="#" class="block p-4 text-blue-100 hover:bg-blue-900 transition duration-500">LINK</a>            </li>            <li>              <a href="#" class="block p-4 text-blue-100 hover:bg-blue-900 transition duration-500">LINK</a>            </li>            <li>              <a href="#" class="block p-4 text-blue-100 hover:bg-blue-900 transition duration-500">LINK</a>            </li>            <li class="group hover:bg-white">              <div x-data="{ resourcesMenu: false }" x-on:mouseover="resourcesMenu = !resourcesMenu" x-on:mouseleave="resourcesMenu = !resourcesMenu">                <a href="#" class="block p-4 text-orange-400 group-hover:text-blue-900 transition duration-500">MEGA MENU</a>                <div x-show="resourcesMenu" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-1" class="absolute inset-x-0 transform shadow-lg -mt-1 z-10">                  <div class="bg-white">                    <div class="max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16">