HTML+TailwindCSS导航栏下拉菜单hover不显示问题求助

你的下拉菜单无法正常显示主要有两个问题：

1. 部分下拉菜单未设置初始隐藏 #

Industries对应的下拉容器缺少hidden类，导致它默认处于显示状态；而Solutions的下拉虽加了hidden，但鼠标从导航项移到下拉菜单时，mt-1产生的间隙不属于父级group（<li>）的hover范围，会导致下拉菜单瞬间消失。

2. 鼠标hover区域存在间隙 #

mt-1让下拉菜单和导航项之间产生了空隙，当鼠标从导航项移动到下拉菜单时，会短暂离开group的hover范围，触发下拉菜单隐藏。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Front Page</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-slate-600">
  <nav class="bg-white text-black h-12 flex items-center justify-between px-4">
    <div class="text-lg font-semibold">ABC Enterprises</div>
    <ul class="flex items-center space-x-4">
        <li class="relative group py-2">
            <a href="#" class="text-black hover:text-gray-300 px-3 font-bold rounded-md">Solutions</a>
            <div class="dropdown-content absolute hidden bg-white text-black py-2 rounded shadow-lg min-w-max top-full group-hover:block">
                <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG & Sustainability Reporting & Management</a>
                <a href="#" class="block px-4 py-1 hover:bg-gray-100">Carbon Accounting & GHG Measurement</a>
                <a href="#" class="block px-4 py-1 hover:bg-gray-100">Sustainable Procurement & Sourcing</a>
                <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG Portfolio Management For Investors</a>
                <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG Consulting</a>
            </div>
        </li>
        <li class="relative group py-2">
            <a href="#" class="text-black hover:text-gray-300 px-3 font-bold rounded-md">Industries</a>
            <div class="dropdown-content absolute hidden bg-white text-black py-2 rounded shadow-lg min-w-max top-full group-hover:block">
                <a href="#" class="block px-4 py-1 hover:bg-gray-100">Manufacturing</a>
                <a href="#" class="block px-4 py-1 hover:bg-gray-100">Agri-business & Forestry</a>
                <a href="#" class="block px-4 py-1 hover:bg-gray-100">Retail & Hospitality</a>
                <a href="#" class="block px-4 py-1 hover:bg-gray-100">Health & Education</a>
                <a href="#" class="block px-4 py-1 hover:bg-gray-100">Infrastructure</a>
                <a href="#" class="block px-4 py-1 hover:bg-gray-100">Financial Institutions & Funds</a>
                <a href="#" class="block px-4 py-1 hover:bg-gray-100">Real Estate & Construction</a>
            </div>
        </li>
        <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">Contact Us</a></li>
        <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">About Us</a></li>
        <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">Sign In</a></li>
    </ul>
  </nav>
</body>
</html>

关键修改点 #

• 给两个带下拉的<li>添加py-2，扩大hover触发区域，覆盖下拉菜单与导航项之间的空隙
• 移除下拉菜单的mt-1，避免产生间隙导致hover中断
• 给Industries的下拉容器添加hidden类，确保初始状态隐藏

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