TailwindCSS底部悬浮导航菜单问题：悬浮面板移入即消失

问题场景 #

我尝试用TailwindCSS构建一个底部水平导航栏，要求鼠标悬停菜单时，在导航栏正上方显示一个与导航栏同宽且对齐的面板。我写了一段代码，但遇到问题：当悬停Menu 3后，把鼠标移入弹出的面板时，面板会立刻消失。

我的代码如下：

<div class="bg-red-50 w-full h-64">Some stuff above the menu div</div>
  
<div class="grid grid-cols-3 h-10 w-96 bg-red-50 mt-4 mx-auto relative">
    <div class="peer/menu1 cursor-pointer bg-yellow-50 w-32">
      Menu 1
    </div>
    <div class="peer/menu2 cursor-pointer bg-blue-200 w-32">
      Menu 2
    </div>
    <div class="peer/menu3 cursor-pointer bg-green-100 w-32">
      Menu 3
    </div>
    <div class="invisible absolute z-50 peer-hover/menu2:visible col-span-3 bottom-10 p-4 bg-gray-100 w-full">
      <p>Menu items 2</p>
      <p>Some more text</p>
    </div>
    <div class="invisible absolute z-50 peer-hover/menu3:visible col-span-3 bottom-10 p-4 bg-gray-100 w-full">
      <p>Menu items 3</p>
      <button class="px-2 py-1 rounded-lg m-2 bg-red-50">Button</button>
      <p>Some more text</p>
    </div>
</div>

问题原因 #

当前代码里，面板的显示完全依赖单个菜单项的peer-hover状态。当鼠标从菜单移向面板时，会离开菜单项的hover触发区域，导致菜单的hover状态消失，面板随即隐藏。核心问题是菜单和面板不属于同一个hover触发范围，鼠标移动过程中会触发状态切换。

修复方案 #

把每个菜单项和对应的面板包裹在同一个容器内，利用容器的group-hover状态控制面板显示，同时确保容器的hover范围覆盖菜单、面板以及两者之间的间隙，这样鼠标在菜单和面板间移动时，不会脱离hover区域。

修复后的代码：

<div class="bg-red-50 w-full h-64">Some stuff above the menu div</div>
  
<div class="grid grid-cols-3 h-10 w-96 bg-red-50 mt-4 mx-auto relative">
  <!-- Menu 1 容器 -->
  <div class="group relative cursor-pointer">
    <div class="bg-yellow-50 w-32 h-full">Menu 1</div>
    <!-- 如需给Menu1添加面板，可在此处插入 -->
  </div>
  
  <!-- Menu 2 容器 -->
  <div class="group relative cursor-pointer">
    <div class="bg-blue-200 w-32 h-full">Menu 2</div>
    <div class="invisible absolute z-50 group-hover:visible left-0 -bottom-[calc(100%+1rem)] p-4 bg-gray-100 w-96">
      <p>Menu items 2</p>
      <p>Some more text</p>
    </div>
  </div>
  
  <!-- Menu 3 容器 -->
  <div class="group relative cursor-pointer">
    <div class="bg-green-100 w-32 h-full">Menu 3</div>
    <div class="invisible absolute z-50 group-hover:visible left-0 -bottom-[calc(100%+1rem)] p-4 bg-gray-100 w-96">
      <p>Menu items 3</p>
      <button class="px-2 py-1 rounded-lg m-2 bg-red-50">Button</button>
      <p>Some more text</p>
    </div>
  </div>
</div>

关键调整点 #

• 用group替代peer，将菜单项和对应面板放在同一个group容器中，通过group-hover统一控制面板显示
• 调整面板定位：用-bottom-[calc(100%+1rem)]控制面板与菜单的间距，确保容器的relative范围覆盖面板区域
• 面板宽度设置为w-96，与导航栏宽度保持一致，保证对齐

修改后，鼠标在菜单和面板间移动时始终处于容器的hover范围内，面板就不会再出现移入即消失的问题。

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