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

Question

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

一切正常，除了有时（碰巧），当您在第一行<ul>项目和子<ul>项目的填充之间时，辅助<ul>将消失：

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

JSFiddle

<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

• 将相关的 class 添加到li标签。
• 使用dropdown-menu absolute class 添加top-0 。
• 将菜单内ul的填充更改为p-8 。 只是一个小css

Answer 2

顺风集团

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

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

第 1 步将组和相关类添加到包装下拉列表的 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 步这是最后一步，在变体中的tailwind.config.js文件中添加 display: ['group-hover']

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