Tailwind CSS Navigation Hover Dropdown with Padding - html

Question

I'm attempting to show the sub <ul> list on the first navigation item when the item is hovered:
Everything is working except for sometimes (it's hit and miss) when you are in between the padding of the first line <ul> item and the sub <ul> item, the secondary <ul> will disappear:
How can I keep the secondary navigation list open when I'm navigating from the dropdown to the item list?
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

Tailwind Group
You can use group and group-hover they are pretty simple and handy
Here is the full code example: tailwind-playgroud
Step 1 add group and relative classes to the div that wraps the dropdown
<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>
Step 2 add group-hover:block to the div that wraps the dropdown links
<div class="group-hover:block dropdown-menu absolute hidden h-auto">
Step 3 add top-0 to the ul that wraps the dropdown links
<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>
Step 4 This is last step add display: ['group-hover'] in the tailwind.config.js file inside variants
variants: {
display:['group-hover']
}

Answer 2

3 changes. Here's the jsfiddle
Add relative class to the li tag.
Add top-0 with the dropdown-menu absolute class.
Change the padding of ul, inside the menu, to p-8. Just a minor css

Answer 3

My solution to this issue: transparent div between
Example (assuming mt-2 from dropdown menu to trigger):
<div className="group">
<button>Dropdown button</button>
<div className="hidden group-hover:block -mt-4">
<div className="mt-6 bg-transparent">
<ul>
<li></li>
<li></li>
<ul>
</div>
</div>