Tailwind CSS 带填充的导航悬停下拉菜单

Question

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

一切正常，除了有时（碰碰运气），当你在第一行 <ul> 项目和子 <ul> 项目的填充之间时，次要 <ul> 会消失：

当我从下拉菜单导航到项目列表时，如何保持二级导航列表打开？

<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;
}

Answer 1

3 变化。这是 jsfiddle

添加 relative class 到 li 标签。
添加 top-0 与 dropdown-menu absolute class.
将菜单内 ul 的填充更改为 p-8。只是未成年css

Answer 2

顺风集团

你可以使用 group 和 group-hover 它们非常简单方便

这是完整的代码示例：tailwind-playgroud

第 1 步将 group 和 relative 类添加到包含下拉列表 [=15] 的 div =]

<li class="group relative dropdown  px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide">
  <a>Dropdown</a>

第 2 步将 group-hover:block 添加到包含下拉链接的 div

<div class="group-hover:block dropdown-menu absolute hidden h-auto">

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

<ul class="top-0 w-48 bg-white shadow px-6 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>

步骤 4 这是最后一步添加显示：['group-hover'] 在 tailwind.config.js 文件中 variants

variants: {
 display:['group-hover']
}

Tailwind CSS 带填充的导航悬停下拉菜单

Tailwind CSS Navigation Hover Dropdown with Padding

html

css

tailwind-css

顺风集团