Delay Time for Closing Sub Menus When Multiple Dropdowns are Opened

My issue involves a multi-level drop-down menu that is solely constructed using CSS. The problem I am facing is that there is a delay of one second before the drop-down closes when the mouse is moved away. This delay causes multiple drop-down menus to stack on top of each other when moving from one menu to another.

What I require is a solution where the drop-down closes immediately if the mouse hovers over another menu, preventing the accumulation of open drop-down menus. I am open to solutions utilizing jQuery as well.

You can find my current code in this jsfiddle and snippet provided below:

.main-navigation {
  clear: both;
  display: block;
  float: left;
  width: 100%;
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.main-navigation ul ul {
  visibility: hidden;
  position: absolute;
  top: 105%;
  left: 0;
  transition: 0s 0.5s;
  z-index: 9999;
  margin-top: -3px;
}

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
  left: 100%;
}

.main-navigation ul ul a {
  width: 250px;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li.focus>ul {
  visibility: visible;
  transition-delay: 0s;
  z-index: 9999;
}

.main-navigation li {
  float: left;
  position: relative;
}

.main-navigation a {
  display: block;
  text-decoration: none;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
  color: #fff;

.navigation li {
  background-color: #6FB7E9;
  border-radius: 3px;
  cursor: pointer;
  padding: 12px;
  padding: 0.75rem;
}

.navigation li a:hover,
.navigation li.active a {
  background-color: #3C8DC5;
}

.sub-menu {
  background-color: #419bd0;
  border-top: 3px solid #2d6b90;
}
}
<nav class="main-navigation">
  <div class="menu-main-nav-container">
    <ul id="primary-menu" class="menu">
      <li><a href="#">Parent</a>
        <ul class="sub-menu">
          <li><a href="#">Link Parent</a>
            <ul class="sub-menu">
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
            </ul>
          </li>
          <li><a href="#">Other</a>
            <ul class="sub-menu">
              <li><a href="/">Link B</a></li>
              <li><a href="/">Link B</a></li>
              <li><a href="/">Link B</a></li>
              <li><a href="/">Link B</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

javascriptjqueryhtmlcssdropdown

Answer №1

It seems like you're suggesting a clever workaround by setting the transition delay only for the "not hover" state, so it will only trigger on mouse out.

.main-navigation:not(:hover) ul ul {
  transition: 0s 0.5s;
}

Here is a functional example:

.main-navigation {
  clear: both;
  display: block;
  float: left;
  width: 100%;
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.main-navigation:not(:hover) ul ul {
  transition: 0s 0.5s;
}

.main-navigation ul ul {
  visibility: hidden;
  position: absolute;
  top: 105%;
  left: 0;
  z-index: 9999;
  margin-top: -3px;
}

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
  left: 100%;
}

.main-navigation ul ul a {
  width: 250px;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li.focus>ul {
  visibility: visible;
  transition-delay: 0s;
  z-index: 9999;
}

.main-navigation li {
  float: left;
  position: relative;
}

.main-navigation a {
  display: block;
  text-decoration: none;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
  color: #fff;
  text-decoration: none;
}

.navigation li {
  display: inline;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
  background-color: #6FB7E9;
  border-radius: 3px;
  cursor: pointer;
  padding: 12px;
  padding: 0.75rem;
}

.navigation li a:hover,
.navigation li.active a {
  background-color: #3C8DC5;
}

.navigation ul {
  text-align: center;
  padding: 0px;
  margin-left: 0px;
  margin-bottom: 50px;
  margin-top: 20px;
}

.sub-menu li {
  width: 100%;
}

.sub-menu {
  background-color: #419bd0;
  border-top: 3px solid #2d6b90;
}
<nav class="main-navigation">
  <div class="menu-main-nav-container">
    <ul id="primary-menu" class="menu">
      <li><a href="#">Parent</a>
        <ul class="sub-menu">
          <li><a href="#">Link Parent</a>
            <ul class="sub-menu">
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
            </ul>
          </li>
          <li><a href="#">Other</a>
            <ul class="sub-menu">
              <li><a href="/">Link B</a></li>
              <li><a href="/">Link B</a></li>
              <li><a href="/">Link B</a></li>
              <li><a href="/">Link B</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Answer №2

Do not use transition on .main-navigation ul ul; instead, include it in .main-navigation ul li>ul as shown below:

.main-navigation ul li>ul {
  transition: visibility 0.5s;
}

Code snippet:

.main-navigation {
  clear: both;
  display: block;
  float: left;
  width: 100%;
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.main-navigation ul ul {
  visibility: hidden;
  position: absolute;
  top: 105%;
  left: 0;
  z-index: 9999;
  margin-top: -3px;
}

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li:focus>ul {
  left: 100%;
}

.main-navigation ul ul a {
  width: 250px;
}

.main-navigation ul li>ul {
  transition: visibility 0.5s;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li:focus>ul {
  visibility: visible;
  z-index: 9999;
}

.main-navigation li {
  float: left;
  position: relative;
}

.main-navigation a {
  display: block;
  text-decoration: none;
}

.sub-menu li {
  width: 100%;
}

.sub-menu {
  background-color: #419bd0;
  border-top: 3px solid #2d6b90;
}
<nav class="main-navigation">
  <div>
    <ul id="primary-menu" class="menu">
      <li><a href="#">Parent</a>
        <ul class="sub-menu">
          <li><a href="#">Link Parent</a>
            <ul class="sub-menu">
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
            </ul>
          </li>
          <li><a href="#">Other</a>
            <ul class="sub-menu">
              <li><a href="/">Link B</a></li>
              <li><a href="/">Link B</a></li>
              <li><a href="/">Link B</a></li>
              <li><a href="/">Link B</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Check out the code on JSFiddle: https://jsfiddle.net/zj9nLu38/40/

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

Problem with transitioning to a different page on Next.js

I am having trouble navigating to a different page in Next.js using the router.push function. The goal is to route to "example.js" by utilizing a variable called ChangePage, which leads to a single div element on that page. However, despite following the ...

javascriptreactjsnext.jsnavigation

The operation failed to add the SVG element to the main SVG container

I am facing an issue with adding a text element to my existing svg using a mouseover event. The code seems to work fine in general, but I am having trouble appending the created text element to the existing svg file (root). I have tried various methods, in ...

javascriptxmleventssvgmouseover

Placing miniature vessels within a larger vessel, where two small containers fit on one level of the larger container (refer to images)

I am looking for a way for users to input text in the "your text" container and then click "add". This action should create a new container within the larger red-lined container with the information provided by the user. I know how to do this already, but ...

javascriptjqueryangularjs

`How can you indicate a clicked linkbutton from a group of linkbuttons in asp.net?`

There is a single aspx page with a set of link buttons on it. Link Button 1 Link Button 2 Link Button 3 Link Button 4 Link Button 5 When any of the link buttons are clicked, they should be highlighted. All these link buttons are contained within a table ...

.netasp.netcss

What is the best way to differentiate and analyze new AJAX output from previous data using div elements?

Embarking on a project to develop a high/low game using JavaScript, I encountered a perplexing issue where the displayed numbers seemed to be out of sync with the variables stored. This discrepancy left me scratching my head as I struggled to get them to a ...

javascriptajax

What causes an error when attempting ++[] but produces 1 with ++[[]][0]?

Can you explain the difference between the following two expressions? It appears that incrementing [] is equivalent to incrementing [[]][0] since the first element of this outer array is []. console.log(++[]); console.log(++[[]][0]); ...

javascript

The border-radius property in CSS selectively rounds only one corner of the modal div window

There seems to be an issue with the border-radius property on modal divs in my project. When I apply the property, only one or two corners of the div round while the other corners remain unchanged. For a visual reference, please check out this image linke ...

htmlruby-on-railscsssass

What is the best way to locate an element using text in xpath?

Having an issue with this HTML source code: <td class="specs_title"> Processortype <a href="#" class="info-link"> <img src="x.jpg" title="" height="16" alt="" width="16" /> <span class="info-popup"> <span class="hd">Processor ...

phphtmltextxpathfind

Manipulating certain attributes of a CSS class for a specific division element

I'm working with a div that has a CSS class applied to it. The class declares the height as x pixels, but I actually want my div to be y pixels high. Is there a way to override the height parameter of the CSS without making changes to the CSS file? ...

htmlcss

Ways to stop jQuery from stripping the <script> elements

Is there a way to stop jquery from removing my JS default behavior? function loadPageSuccess(data) { var data = $(data).find('#content'); alert($(data).html()); $("#content").html(data); $("#page").fadeTo(100,1); } function loadP ...

javascriptajaxjquery

Collect the contents from a text area field by clicking a button, and store them in an array in the computer's memory

I am currently working on a project where I need to create a large array in the computer memory and then save the final output as a .json file. However, I am facing challenges in writing a script that can continuously update an array on my webpage, which w ...

jqueryjson

The z-index of the React Apex Chart toolbar menu icon is too high. Is there a way to decrease it?

Is there a way to adjust the z-index value of the icons within React Apexchart's toolbar menu? Even when I position my element at a higher level, they remain on top of it. ...

cssreactjsapexcharts

Why am I experiencing varying outcomes between createShadowRoot and attachShadow methods?

Recently, I've encountered an issue related to shadow dom while working on a project. After referring to an older tutorial that uses createshadowroot, I realized that this method is now considered deprecated and should be replaced by attachshadow. Un ...

csswebshadow-dom

The controller failed to return a value when utilizing the factory

I am attempting to pass a value from my view to the controller using a function within the ng-click directive. I want to then use this value to send it to my factory, which will retrieve data from a REST API link. However, the value I am sending is not ret ...

javascriptangularjspromiseangular-promiseangularjs-http

js TouchEvent: When performing a pinch gesture with two fingers and lifting one of them up, how can you determine which finger was lifted?

I am currently working on a challenging touching gesture and have encountered the following issue: let cachedStartTouches: TouchList; let cachedMoveTouches: TouchList; function onStart(ev: TouchEvent) { // length equals 2 when two fingers pinch start ...

javascripthtmltypescriptdomtouch

Set default values for input fields based on selected options in php and mysql

I need help creating a form that will submit details when an option is selected from a database. The MySQL table has the following fields under USERS : [email], [age], [name]. I want to automatically fill in the values of other input fields when a user s ...

phpjqueryhtmlmysqldrop-down-menu

Execute JavaScript code prior to sending a Rails form

Before submitting the form, I would like to trigger the html5 geolocation javascript code. Here's how I envision the process: upon form submission, the user is prompted with a geolocation popup. After allowing access, the form data should be processed ...

javascriptjqueryruby-on-rails

Deactivate the BACKSPACE button

Similar Question: How to disable backspace except textbox using jQuery I am looking for a solution to prevent the BACKSPACE button from functioning unless it is within a TEXT field. Although I have tried the code below, it ends up disabling the backs ...

jqueryhtml

Adding a query parameter to a dynamic route in NextJS

In my NextJS application, I have implemented a language selector that is displayed on every page. The goal is to change the current URL by adding a query parameter lang=en when a new language is selected. The function responsible for updating the URL look ...

javascriptreactjsnext.js

Adding a unique component to a Spring Boot application with Thymeleaf integration

My navigation bar includes a list with a dropdown feature. When the user clicks on the dropdown entry, I want to display a snippet of another HTML page within the project. The navigation bar HTML code is as follows: <div th:fragment="navbar"& ...

javahtmlspring-bootthymeleafbootstrap-5