Navigation Menu with Tailwind CSS Hover Effects and Spacing

I'm trying to display the sub <ul> list on the first navigation item when hovering over it:

https://i.sstatic.net/KNqcx.png

Everything is working fine except sometimes (it's inconsistent) when you are between the padding of the first line in the <ul> item and the sub <ul> item, the secondary <ul> will disappear:

https://i.sstatic.net/DhXPT.gif

How can I ensure the secondary navigation list stays open while 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;
}
htmlcsstailwind-css

Answer №1

Windtail Collective

If you utilize collective and collective-hover, they prove to be quite straightforward and useful.

For a complete code example, click here: windtail-example

Step 1: Apply collective and relative classes to the container div of the drop-down menu.

<li class="collective 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 collective-hover:block to the div containing the drop-down links.

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

Step 3: Include top-0 in the ul enclosing the drop-down 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: The final step is to add display: ['collective-hover'] in the windtail.setup.js file under options

options: {
 display:['collective-hover']
}

Answer №2

3 modifications made. Check out the updated code on jsfiddle

  • The li tag now has a new relative class.
  • Added top-0 to the existing dropdown-menu absolute class.
  • Adjusted padding in the sub-menu by changing p-8. A small CSS tweak.

Answer №3

If you're experiencing issues with your dropdown closing when navigating through the items, it could be due to the z-index. Ensure that you include z-50 in your div element.

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

Answer №4

This is my proposal for addressing the issue: adding a transparent div in between

For example (assuming the dropdown menu has a mt-2 class 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In IE8, CSS classes assigned to HTML5 elements are removed when they are printed

Currently, I am facing a challenge where I need to ensure proper printing functionality in IE8. The issue arises when using HTML5 features (such as sections) along with CSS on a page - the problem occurs specifically during printing. For example, when tryi ...

csshtmlprintinginternet-explorer-8preview

Minimize all the open child windows from the main Parent window

I would like to implement a functionality where, upon logging in, the user is directed to a Main Page that opens in a new window. This Main Page contains two buttons, each of which will open a specific report associated with it in a new window when clicked ...

javascripthtmllogoutwindow.openwindow.opener

Tricking Vuejs into triggering a @change event

I possess the following: <input type="radio" :name="activity" v-model="activity" :value="1" v-on:change="callProc(data, data2)" required> Ho ...

htmlvue.js

Passing data from the <ion-content> element to the <ion-footer> element within a single HTML file using Ionic 2

In my Ionic 2 html page, I have a setup where ion-slide elements are generated using *ngFor. I am seeking a way to transfer the data from ngFor to the footer section within the same page. <ion-content> <ion-slides> <ion-slide *n ...

htmlangularionic2angularjs-interpolate

The functionality of Google Maps code is limited on Android devices because the map feature is not available

After updating the Google Maps embed code to be responsive for mobile devices, I discovered that the map still won't display on Android or iPhone. The following is the modified code. Can anyone assist me in resolving this issue so that the map can sho ...

androidhtmlcssgoogle-mapsiframe

What is the most efficient way to transmit an HTML document element from a client to a server in Node JS

I am attempting to capture a snapshot of my client-side document object and send it to the Node.js server. However, when I try to convert it into a string using: JSON.stringify(document.documentElement) I encounter an issue where it becomes an empty obje ...

javascripthtmlnode.jsajaxhttp

Whole page scrolling instead of just inner div scrolling

Once again, I find myself tinkering with CSS... In the current setup, the map container is scrolling on its own, separate from the rest of the content within the container. How can I enable the entire page to scroll when additional content is added to the ...

htmlcsslayout

Is there an animated Google Contact Form in the works?

Is it possible to replicate the onclick animation featured on the Google login form? The animation involves the placeholder text shrinking and moving to the top left corner as you click the button box, while a border forms around the text. Click here to ...

htmlcssformsanimationtransform

Performing calculations for given IndexedFaceSet of coordIndex in X3D

I am looking to design an X3D arch using HTML, similar to this example: I have tried using a cylinder shape to create the arch, but I found it insufficient as I couldn't define the thickness by setting its solid value to 'false'. I have see ...

htmlx3dx3dom

Creating a circular shape that adjusts to different screen sizes using only CSS

Is there a way to create perfect circles using only CSS without them turning into ovals when using percentage values for height? ...

htmlcss

How can I deactivate a specific range without altering the appearance with Bootstrap 5?

My challenge lies in maintaining the style of a range input while disabling user interaction with it. I've tried to recreate the original styling manually, but without success: <!DOCTYPE html> <html lang="en"> <head> <!-- ...

htmlcssbootstrap-5

Unable to activate/deactivate the form components on a Grails webpage

I have multiple forms and buttons on a single page in my Grails application. What I'm trying to achieve is the ability to hide and show different forms on the page using an enable button with jQuery. I attempted to use ID selectors, but this resulted ...

jqueryhtmltemplatesgrails

My attempts at locating child elements using XPATH have been unsuccessful in finding an exact match

I have a specific requirement to input a string into the webdriver and then compare it with the label of a radio button. <input type="radio" onclick="Element.show('indicator_radio_term_190');render_selected_term('190','1', ...

htmlseleniumxpathautomation

Troubleshooting problem with local storage: JSON/JQuery items not appearing on display

My goal is to retrieve and organize all the items in localStorage and display them on an HTML page. Here is my approach: <script> function ShoppingCart() { var totalPrice = 0; var output; var productName; var productAlbum; var ...

javascriptjqueryjsonhtmllocal-storage

Is it not possible to update the innerHTML stored in a variable in real-time?

I am attempting to link a div's text with a variable that changes its value based on different button clicks (using plain JavaScript), but I am struggling to update the inner HTML dynamically. It only displays the initial value set on page load. What ...

javascripthtmlcss

The HTML element containing a React variable is failing to render ASCII characters

I am encountering an issue where a custom title, received and set in a JS variable, is displaying the ASCII code instead of the symbol. To illustrate, here is a basic example of the render function: render() { var title = "My Title&#8482;" retur ...

javascripthtmlreactjsascii

What's the best way to set a specific default value for a numeric slider that isn't arbitrary?

My numeric slider code allows me to set minimum and maximum values, but I'm struggling to specify a specific default value when the page loads. Although I can provide a random value, I want the default value to be fixed like using the attribute value= ...

htmlangularjs

The intricate arrangement of multiple rows and columns using Bootstrap 4 technology

Struggling with multi-nested rows and columns in Bootstrap 4, I encountered an issue where the line2 was positioned next to line1 instead of below it with a horizontal bar separating them. Can someone help me understand why this is happening? <link h ...

htmlcssbootstrap-4bootstrap-5

Contrasting the impact of utilizing async:false in conjunction with a callback function versus utilizing jqXHR.done()

According to the jQuery documentation: Starting from jQuery 1.8, using async: false with jqXHR ($.Deferred) is deprecated. Instead, you should utilize the success/error/complete callback options instead of methods like jqXHR.done() or the deprecated jqX ...

jqueryhtmlajaxsynchronous

Sticky header in an Angular Material table

Using Angular 7 with Angular material design templates, my current result looks like this: https://i.sstatic.net/G4W78.jpg However, I am aiming for a result similar to the following - with a scrollbar under the sticky header. https://i.sstatic.net/WgjVh ...

cssangulartypescriptangular-material