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

Posted 2023-03-07

【中文标题】带有填充的 Tailwind CSS 导航悬停下拉菜单

【英文标题】：Tailwind CSS Navigation Hover Dropdown with Padding

【发布时间】：2020-09-15 06:09:41

【问题描述】：

当项目悬停时，我试图在第一个导航项目上显示子 <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;

【参考方案1】：

3 个变化。这是jsfiddle

将

relative

类添加到 li 标记。 使用dropdown-menu absolute 类添加

top-0

。 将菜单内ul 的填充更改为p-8。只是一个小的 CSS

【参考方案2】：

顺风集团

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

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

第 1 步将 group 和 relative 类添加到包装下拉列表的 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 步这是最后一步，在 variants

的

tailwind.config.js

文件中添加 display: ['group-hover']

variants: 
 display:['group-hover']