Tailwind CSS导航栏下拉菜单鼠标离开头像即消失问题求助

问题核心：下拉菜单与头像按钮之间存在间隙，鼠标从头像移向菜单时会经过无元素的间隙区域，导致group的hover状态丢失，菜单随之隐藏。

修复方案（推荐第一种） #

方案一：消除菜单与按钮的间隙 #

将下拉菜单的top-10改为top-full，让菜单紧贴按钮下方，可搭配mt-1保留微小间距，确保鼠标移动时不会脱离hover区域：

<div class="absolute top-full right-0 mt-1 bg-white w-48 py-2 rounded-md shadow-xl z-10 group-hover:block hidden" id="userMenu">
  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Log out</a>
</div>

方案二：扩展group的hover区域 #

若需保留间隙，给外层group容器添加底部内边距，将间隙纳入group的hover范围：

<div class="group relative ml-3 pb-4" id="user-profile">

同时可调整菜单的top值保证位置正确，比如用top-[calc(100%+0.5rem)]替代top-10。

完整修改后的代码示例 #

<nav class="bg-sky-50">
  <div class="flex justify-center">
    <img class="block w-auto h-[13rem] lg:hidden" src="{{company.company_logo.url}}" alt="Pokestop logo">
    <img class="hidden w-auto h-[13rem] lg:block" src="{{company.company_logo.url}}" alt="Pokestop logo">
  </div>

  <div class="flex flex-wrap mx-5">
    <div class="flex space-x-4">
      <a href="#" class="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium" aria-current="page">
        Bestil Pakker
      </a>

      <a href="#" class="text-gray-600 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">
        Søg Kort
      </a>
    </div>

    <div class="ml-auto">
      {% if userAuthenticated %}
      <div class="group relative ml-3" id="user-profile">
        <button type="button"
          class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
          id="user-menu-button" aria-expanded="false" aria-haspopup="true">
          <span class="sr-only">Open user menu</span>
          <img class="h-8 w-8 rounded-full"
            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
            alt="">
        </button>

        <div class="absolute top-full right-0 mt-1 bg-white w-48 py-2 rounded-md shadow-xl z-10 group-hover:block hidden"
          id="userMenu">
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Log out</a>
        </div>
      </div>
      {% else %}
      <div class="relative ml-3">
        <a href="#" class="bg-green-800 text-lime-100 px-3 py-2 rounded-md hover:text-gray-400 text-lg"
          aria-current="page">
          Log In
        </a>
      </div>
      {% endif %}
    </div>
  </div>
</nav>

内容的提问来源于stack exchange，提问作者jxw