Reputation: 2261

Tailwind CSS Navigation Hover Dropdown with Padding

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

Upvotes: 7

Answers (4)

Kunal Kalwar

Reputation: 955

If your dropdown closes when you navigate on the items, that may be because of z index. Make sure to add z-50 to your div.

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

Upvotes: 0

realfranser

Reputation: 11

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>

Upvotes: 0

Alban Kaperi

Reputation: 625

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']
}

Upvotes: 10

Digvijay

Reputation: 8947

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

Upvotes: 6

Tailwind CSS Navigation Hover Dropdown with Padding

Answers (4)

Tailwind Group

Related Questions