CSS Dropdown Menu: Add Delay on Mouse Out

CSS Dropdown Menu: Add delay on mouse out

Change all your :hover to a class (e.g. ".hover"). Add mouseover/mouseout events to add the "hover" class in a setTimeout. The setTimeout should check if the user is still hovering over the element.

Pure CSS drop down menu with delay issue

Pretty simple, add the transition delay only when you don't hover the menu container (you move the mouse out)

By the way thanks for inspiration how to solve accidentally hovering out of nested narrow menu items.

#primary_nav_wrap ul:hover ul
{
    transition: 0s;
}
#primary_nav_wrap ul:not(:hover) ul
{
    transition: 0.1s 1s;
}

(This should do the same)

#primary_nav_wrap ul ul
{
    transition: 0.1s 1s;
}
#primary_nav_wrap ul:hover ul
{
    transition: 0s;
}

#primary_nav_wrap{ margin-top:15px}
#primary_nav_wrap ul{ list-style:none; position:relative; float:left; margin:0; padding:0}
#primary_nav_wrap ul a{ display:block; color:#333; text-decoration:none; font-weight:700; font-size:12px; line-height:32px; padding:0 15px; font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif}
#primary_nav_wrap ul li{ position:relative; float:left; margin:0; padding:0}
#primary_nav_wrap ul li.current-menu-item{ background:#ddd}
#primary_nav_wrap ul li:hover{ background:#f6f6f6}
#primary_nav_wrap ul ul{ visibility: hidden; position:absolute; top:100%; left:0; background:#fff; padding:0}#primary_nav_wrap:not(:hover)  ul{    transition: all 0.1s;    transition-delay:1s;}#primary_nav_wrap:hover > ul:not(:hover){    transition: all 0s!important;    transition-delay:0s!important;    display:none!important;}   #primary_nav_wrap ul ul li{ float:none; width:200px}
#primary_nav_wrap ul ul a{ line-height:120%; padding:10px 15px}
#primary_nav_wrap ul ul ul{ top:0; left:100%}
#primary_nav_wrap ul li:hover > ul{ visibility: visible;  transition-delay: 0s;}

<h1>Simple Pure CSS Drop Down Menu</h1><nav id="primary_nav_wrap"><ul>  <li class="current-menu-item"><a href="#">Home</a></li>  <li><a href="#">Menu 1</a>    <ul>      <li><a href="#">Sub Menu 1</a></li>      <li><a href="#">Sub Menu 2</a></li>      <li><a href="#">Sub Menu 3</a></li>      <li><a href="#">Sub Menu 4</a>        <ul>          <li><a href="#">Deep Menu 1</a>            <ul>              <li><a href="#">Sub Deep 1</a></li>              <li><a href="#">Sub Deep 2</a></li>              <li><a href="#">Sub Deep 3</a></li>                <li><a href="#">Sub Deep 4</a></li>            </ul>          </li>          <li><a href="#">Deep Menu 2</a></li>        </ul>      </li>      <li><a href="#">Sub Menu 5</a></li>    </ul>  </li>  <li><a href="#">Menu 2</a>    <ul>      <li><a href="#">Sub Menu 1</a></li>      <li><a href="#">Sub Menu 2</a></li>      <li><a href="#">Sub Menu 3</a></li>    </ul>  </li>  <li><a href="#">Menu 3</a>    <ul>      <li class="dir"><a href="#">Sub Menu 1</a></li>      <li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>        <ul>          <li><a href="#">Category 1</a></li>          <li><a href="#">Category 2</a></li>          <li><a href="#">Category 3</a></li>          <li><a href="#">Category 4</a></li>          <li><a href="#">Category 5</a></li>        </ul>      </li>      <li><a href="#">Sub Menu 3</a></li>      <li><a href="#">Sub Menu 4</a></li>      <li><a href="#">Sub Menu 5</a></li>    </ul>  </li>  <li><a href="#">Menu 4</a></li>  <li><a href="#">Menu 5</a></li>  <li><a href="#">Menu 6</a></li>  <li><a href="#">Contact Us</a></li></ul></nav>

Delay the css:hover state on mouseout

You can use a transition with a delay for the bit to make it stay visible on your hover out:

.nested {  pointer-events:none;       /* this is so it behaves like display none and mouse does not interact with child when hidden */  opacity: 0;  transition: opacity 0.1s;  /* change length to longer for a nicer fade */  transition-delay: 1s;      /* fadeout won't happen for a second */}.hover:hover .nested {  pointer-events: auto;  opacity: 1;  transition: opacity 0.1s;    /* fade in when hovered */  transition-delay: 0s;        /* fade in immediately */}

<div class="hover">  hover  <div class="nested">  nested  </div></div>

How can I delay fadeout of a dropdown menu trigger?

Actually you can't add transition delay as display property is not animated in CSS.

What you could do is add simple JS code to add class on mouseover and timeout removal on mouseout.

---

Related Topics