如何解决React+Tailwind嵌套菜单中Service悬停时Dev子菜单提前展开问题

我用React和Tailwind CSS实现嵌套菜单时遇到了问题：悬停导航栏的「Service」标签时，其子菜单正常显示，但里面的「Development（Dev）」子菜单会跟着提前展开，不符合预期的交互逻辑。

期望的菜单结构：

Services ->
- Dummy tab 1
- Dummy tab 2
- Development ->
- Dummy tab 3
- Dummy tab 4

当前实现代码 #

export default function Navbar() {
  return (
    <>
      <div className="flex justify-evenly items-center p-4 font-medium">
        <img src="https://acrologix.com/wp-content/uploads/2022/02/acrologix-logo-header-01.png" alt="logo" className="h-[11vh] mr-40"></img>
        <div className="mr-20">
          <ul className="flex justify-center items-center gap-8">
            <li className="hover:text-blue-600"><a href="/">Home</a></li>
            <li className="hover:text-blue-600"><a href="/">About</a></li>
            <li className="hover:text-blue-600"><a href="/">Our Clients</a></li>

            <div className="group relative inline-block">
              <div id="dropdownBtn" className="group-hover:text-blue-500 transition duration-300 ease-in-out text-black text-base border-none">Services</div>
              <div className="hidden absolute bg-white w-[380px] shadow-md z-10 group-hover:block transition duration-300 ease-in-out text-[13px] p-3 mt-1 rounded-md">

                {/* Existing menu items */}
                <a href="/" className="hover:bg-red-100 hover:text-blue-600 block px-4 py-3 text-black no-underline rounded-sm">Payment Gateway Integrations</a>
                <a href="/" className="hover:bg-red-100 hover:text-blue-600 block px-4 py-3 text-black no-underline rounded-sm">Designing</a>
                <a href="/" className="hover:bg-red-100 hover:text-blue-600 block px-4 py-3 text-black no-underline rounded-sm">Software Testing/QA</a>
                <a href="/" className="hover:bg-red-100 hover:text-blue-600 block px-4 py-3 text-black no-underline rounded-sm">IT Infrastructure Development</a>
                <a href="/" className="hover:bg-red-100 hover:text-blue-600 block px-4 py-3 text-black no-underline rounded-sm">Managed Services & Resource Outsourcing</a>
                <a href="/" className="hover:bg-red-100 hover:text-blue-600 block px-4 py-3 text-black no-underline rounded-sm">Offshore Team Setup</a>

                {/* Development tab with submenu */}
                <div className='group relative inline-block'>
                  <div id='devtab' className='group-hover:text-blue-500 transition duration-300 ease-in-out text-black border-none text-base'>Dev</div>
                  <div className='hidden absolute bg-white w-[250px] shadow-md z-10 group-hover:block transition duration-300 ease-in-out'>
                    <a href='/'>dev</a>
                  </div>
                </div>
              </div>
            </div>



            <div className="group relative inline-block">
              <div className="group-hover:text-blue-500 transition duration-300 ease-in-out text-black text-base border-none">Products</div>
              <div className="hidden absolute bg-white w-[350px] shadow-md z-10 group-hover:block transition duration-300 ease-in-out text-[13px] p-3 font-medium mt-1 rounded-md">
                <a href="/" className="hover:bg-red-100 hover:text-blue-600 block px-4 py-3 text-black no-underline rounded-sm">CampusInBox</a>
                <a href="/" className="hover:bg-red-100 hover:text-blue-600 block px-4 py-3 text-black no-underline rounded-sm">PeopleInBox</a>
                <a href="/" className="hover:bg-red-100 hover:text-blue-600 block px-4 py-3 text-black no-underline rounded-sm">FoodMart Grocery</a>
                <a href="/" className="hover:bg-red-100 hover:text-blue-600 block px-4 py-3 text-black no-underline rounded-sm">FoodMart Resturant</a>
                <a href="/" className="hover:bg-red-100 hover:text-blue-600 block px-4 py-3 text-black no-underline rounded-sm">TeckCure</a>
                <a href="/" className="hover:bg-red-100 hover:text-blue-600 block px-4 py-3 text-black no-underline rounded-sm">ERP</a>
              </div>
            </div>

            <li className="hover:text-blue-600"><a href="/">Contact</a></li>

          </ul>
        </div>
      </div>
    </>
  )
}

问题原因 #

核心问题是Tailwind的group类继承冲突：Dev子菜单的容器也用了group类，而它的父容器（Services的下拉菜单）同样是group。当悬停父group时，子group的group-hover:block会被误触发，导致Dev子菜单提前展开。

解决方案 #

方案1：自定义Tailwind变体（纯CSS方式）

1. 在tailwind.config.js中添加自定义变体，区分父子group的hover触发：

module.exports = {
  // 保留原有配置
  plugins: [
    function({ addVariant }) {
      addVariant('dev-group-hover', '&:hover .dev-group-content');
    }
  ]
}

2. 修改Dev子菜单的代码，替换group类并调整样式：

{/* Development tab with submenu */}
<div className='relative inline-block w-full'>
  <div id='devtab' className='hover:text-blue-500 transition duration-300 ease-in-out text-black border-none text-base px-4 py-3 flex justify-between items-center'>
    Dev
    <span>▶</span> {/* 添加箭头提示存在子菜单 */}
  </div>
  <div className='hidden absolute left-full top-0 bg-white w-[250px] shadow-md z-20 dev-group-hover:block transition duration-300 ease-in-out p-3 rounded-md'>
    <a href='/' className="hover:bg-red-100 hover:text-blue-600 block px-4 py-3 text-black no-underline rounded-sm">Dummy tab 3</a>
    <a href='/' className="hover:bg-red-100 hover:text-blue-600 block px-4 py-3 text-black no-underline rounded-sm">Dummy tab 4</a>
  </div>
</div>

方案2：React状态控制（更灵活的交互）

用useState管理Dev子菜单的显示状态，通过鼠标事件精确控制：

import { useState } from 'react';

export default function Navbar() {
  const [showDevSubmenu, setShowDevSubmenu] = useState(false);

  return (
    <>
      {/* 其余代码保持不变 */}
      {/* Development tab with submenu */}
      <div className='relative inline-block w-full'>
        <div 
          id='devtab' 
          className='hover:text-blue-500 transition duration-300 ease-in-out text-black border-none text-base px-4 py-3 flex justify-between items-center'
          onMouseEnter={() => setShowDevSubmenu(true)}
          onMouseLeave={() => setShowDevSubmenu(false)}
        >
          Dev
          <span>▶</span>
        </div>
        <div className={`absolute left-full top-0 bg-white w-[250px] shadow-md z-20 transition duration-300 ease-in-out p-3 rounded-md ${showDevSubmenu ? 'block' : 'hidden'}`}>
          <a href='/' className="hover:bg-red-100 hover:text-blue-600 block px-4 py-3 text-black no-underline rounded-sm">Dummy tab 3</a>
          <a href='/' className="hover:bg-red-100 hover:text-blue-600 block px-4 py-3 text-black no-underline rounded-sm">Dummy tab 4</a>
        </div>
      </div>
      {/* 其余代码保持不变 */}
    </>
  )
}

额外优化建议 #

• 给所有下拉菜单项统一px-4 py-3的内边距，保持视觉一致性
• 子菜单的z-index设置为比父菜单更高的值（比如父菜单z-10，子菜单z-20），避免遮挡
• 添加箭头图标提示用户该菜单项存在子菜单，提升交互体验

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