基于Tailwind CSS实现二级悬停下拉菜单技术求助

直接基于你的代码修改，给每个一级菜单项添加右侧展开的二级菜单，核心思路是给一级菜单项的<li>加上group类，通过悬停触发子菜单显示，同时调整子菜单的定位和布局：

<div class="p-20">
  <div class="group inline-block relative">
    <button
      class="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center"
    >
      <span class="mr-1">Dropdown</span>
      <svg
        class="fill-current h-4 w-4"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
      >
        <path
          d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
        />
      </svg>
    </button>
    <!-- 一级菜单 -->
    <ul class="absolute hidden text-gray-700 pt-1 group-hover:block">
      <!-- 一级菜单项1 -->
      <li class="group relative">
        <a
          class="rounded-t bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap flex items-center justify-between"
          href="#"
        >
          1
          <svg class="fill-current h-3 w-3 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M10 12l-6-6h12z"/>
          </svg>
        </a>
        <!-- 二级菜单：右侧展开，flex-col布局 -->
        <ul class="absolute hidden left-full top-0 text-gray-700 pt-0 group-hover:block flex-col">
          <li>
            <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">1.1</a>
          </li>
          <li>
            <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">1.2</a>
          </li>
          <li>
            <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">1.3</a>
          </li>
        </ul>
      </li>
      <!-- 一级菜单项2 -->
      <li class="group relative">
        <a
          class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap flex items-center justify-between"
          href="#"
        >
          2
          <svg class="fill-current h-3 w-3 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M10 12l-6-6h12z"/>
          </svg>
        </a>
        <ul class="absolute hidden left-full top-0 text-gray-700 pt-0 group-hover:block flex-col">
          <li>
            <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">2.1</a>
          </li>
          <li>
            <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">2.2</a>
          </li>
          <li>
            <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">2.3</a>
          </li>
        </ul>
      </li>
      <!-- 一级菜单项3 -->
      <li class="group relative">
        <a
          class="rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap flex items-center justify-between"
          href="#"
        >
          3
          <svg class="fill-current h-3 w-3 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M10 12l-6-6h12z"/>
          </svg>
        </a>
        <ul class="absolute hidden left-full top-0 text-gray-700 pt-0 group-hover:block flex-col">
          <li>
            <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">3.1</a>
          </li>
          <li>
            <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">3.2</a>
          </li>
          <li>
            <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">3.3</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

关键修改点说明： #

• 一级菜单项添加group和relative类：让每个一级菜单项成为独立的悬停触发容器，同时为子菜单的绝对定位提供参考坐标系。
• 一级菜单<a>标签改用flex布局：添加右侧箭头图标，直观提示用户该菜单项包含子菜单。
• 二级菜单的定位与布局：
  • absolute left-full top-0：让子菜单紧贴一级菜单项右侧对齐显示
  • hidden group-hover:block：默认隐藏，悬停一级菜单项时自动展开
  • flex-col：明确强制子菜单为垂直布局（保持视觉一致性）
• 样式统一：二级菜单沿用一级菜单的背景色、hover效果，保证整体视觉连贯。

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