Html 带填充的顺风CSS导航悬停下拉列表

当项目悬停时，我试图在第一个导航项目上显示子列表：

每件事都在工作，除了有时它的命中和未命中，当您在第一行项目和子项目之间填充时，第二行项目将消失：

从下拉菜单导航到项目列表时，如何保持辅助导航列表处于打开状态

3个变化。这是我的建议

将相对类添加到li标记。 使用下拉菜单绝对类添加top-0。 将菜单中ul的填充改为p-8。只是一个小css 3个变化。这是我的建议

将相对类添加到li标记。 使用下拉菜单绝对类添加top-0。 将菜单中ul的填充改为p-8。只是一个小css 顺风组 您可以使用组和组悬停，它们非常简单和方便

下面是完整的代码示例：

步骤1将group和relative类添加到包装下拉列表的div中

下拉列表 第2步向包装下拉链接的div添加group hover:block

步骤3将top-0添加到封装下拉链接的ul

项目 项目2 项目3 项目4 项目5 步骤4这是最后一步添加显示：['group-hover']在tailwind.config.js文件的变体中

变体：{ 显示：[“组悬停”] } 顺风组 您可以使用组和组悬停，它们非常简单和方便

下面是完整的代码示例：

步骤1将group和relative类添加到包装下拉列表的div中

下拉列表 第2步向包装下拉链接的div添加group hover:block

步骤3将top-0添加到封装下拉链接的ul

项目 项目2 项目3 项目4 项目5 步骤4这是最后一步添加显示：['group-hover']在tailwind.config.js文件的变体中

变体：{ 显示：[“组悬停”] }

<ul class="w-full">
    <li class="dropdown inline px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide">
        <a>Dropdown</a>
        <div class="dropdown-menu absolute hidden h-auto flex pt-4">
            <ul class="block w-full bg-white shadow px-12 py-8">
                <li class="py-1"><a class="block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer">Item</a></li>
                <li class="py-1"><a class="block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer">Item 2</a></li>
                <li class="py-1"><a class="block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer">Item 3</a></li>
                <li class="py-1"><a class="block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer">Item 4</a></li>
                <li class="py-1"><a class="block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer">Item 5</a></li>
            </ul>
        </div>
    </li>
    <li class="inline px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide"><a>Non-Dropdown</a></li>
    <li class="inline px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide"><a>Non-Dropdown</a></li>
    <li class="inline px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide lg:pr-8"><a>Non-Dropdown</a></li>
</ul>

.dropdown:hover .dropdown-menu {
  display: block;
}