Hover Menu Delayed Close?

Question

I want to add a delay on mouse out from hover menu. Here is my codepen: http://codepen.io/anon/pen/MYjzVb

Please notice that I have used these lines for CSS transitions:

-webkit-transition: visibility 0.65s ease-in;
-moz-transition: visibility 0.65s ease-in;

But this doesn't works. I am using Chrome browser, tried to view it in Firefox too but that doesn't helps.

Please help!

Answer 1

You could use JavaScript for handling mouseenter and mouseleave events and use setTimeout() for the delay(5s) on mouseleave event.

You could set the delay through the variable delay.

Updated CodePen

var items = document.querySelectorAll('.drop_menu > li');
var delay = 5000;

for (i = 0; i < items.length; i++) {
  items[i].addEventListener('mouseenter', function() {
    var c = this.children
    for (j = 0; j < c.length; j++) {
      if (c[j].localName == 'ul') {
        c[j].style.display = 'block';
        c[j].style.position = 'absolute';
      }
    }
  });
  items[i].addEventListener('mouseleave', function() {
    mouseLeave(this, j);
  });
}

function mouseLeave(el, j) {
  setTimeout(function() {
    var c = el.children;
    for (j = 0; j < c.length; j++) {
      if (c[j].localName == 'ul') {
        c[j].style.display = 'none';
      }
    }
  }, delay)
}

.drop_menu {
  background: #10BDF5;
  padding: 0;
  margin: 0;
  list-style-type: none;
  height: 25px;
}
.drop_menu li {
  display: inline-block;
}
.drop_menu li a {
  padding: 3px 6px;
  display: block;
  color: #FFF;
  text-decoration: none;
  font-size: 11px;
  line-height: 22px;
}
/* Submenu */

.drop_menu ul {
  position: absolute;
  display: none;
  list-style-type: none;
}
.drop_menu > li {
  position: relative;
}
.drop_menu li:hover {
  background: #51C7ED;
}
.drop_menu li ul {
  left: 0px;
  top: 28px;
  background: #51C7ED;
  padding: 0px;
  border-bottom: 5px solid #1292BB;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.drop_menu li ul li a {
  padding: 1px 4px;
  display: block;
  width: 150px;
  font-size: 11px;
  text-indent: 11px;
  background-color: #10BDF5;
}
.drop_menu li:hover ul li a:hover {
  background: #51C7ED;
}
#panel {
  background: #10BDF5;
  color: #FFF;
  font-size: 11px;
  text-align: left;
  border: 1px solid #30B3DE;
  padding: 3px 4px;
}

<div id="panel">
  <ul class="drop_menu">
    <li><a href="upgrade.php">Upgrade Account</a>
    </li>
    <li><a href="link.php">Link One</a>
      <ul>
        <li><a href="link.php">link</a>
        </li>
        <li><a href="link.php">link</a>
        </li>
        <li><a href="link.php">link</a>
        </li>
      </ul>
    </li>
    <li><a href="link.php">Link Two</a>
    </li>
  </ul>
</div>

Answer 2

1- WITHOUT ANIMATION:

/**RESETING BROWSER STYLE*/
*{box-sizing: border-box; padding: 0; margin: 0}

/**SETTING THE ROOT ELEMENT BACKGROUND*/
:root{background: #ccc}

/**REMOVING THE STYLE ON ALL LIST IN [id=panel]*/
[id=panel] li{
    list-style-type: none
}

/**INIT OUR DROP MENU*/
.drop_menu {
    background: #10BDF5;
    height: 25px
}
/* SUBMENU position:absolute AND OPACITY INSTEAD OF VISIBILITY and ease-out not ease-in*/
.drop_menu ul {
    position: absolute;
    left: 0;
    top: 28px;
    height: 0; /**SET THIS TO ZERO SINCE WE CAN'T ANIMATE display: none*/
    overflow: hidden; /**YOU NEED THIS TO HIDE THE LIST*/
    background:#51C7ED;
    border-bottom: 5px solid transparent;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    opacity: 0; /**DO NOT DISPLAY THE LIST ON INIT STATE*/
    transition:opacity 0 5s linear, height 0 5s linear,border-bottom 0 5s linear/**TRANSITION ON OPACITY WITHOUT DELAY BUT ON HEIGHT WITH A DELAY GREATER OR EGAL THE OPACITY ANIMATION DURATION*/
}
.drop_menu li:hover ul {
    transition:height 0s ease-out ;/**TRANSITION ONLY ON HEIGHT*/
    opacity: 1;
    border-bottom: 5px solid #1292BB;
    height: 76px /**SET THE HEIGHT ON MOUVE IN*/
}
/**GIVING position: relative TO THE PARENT OF OUR UNORDERED LIST SINCE IT HAS position:absolute */

.drop_menu li { float:left; position: relative}
.drop_menu li a {
    padding:3px 6px;
    display:block;
    color:#FFF;
    text-decoration:none;
    font-size: 11px;
    line-height: 22px;
}




.drop_menu li:hover { position:relative; background:#51C7ED; }

.drop_menu ul a {
    padding:1px 4px;
    display:block;
    width:150px;
    font-size: 11px;
    text-indent:11px;
    background-color:#10BDF5;
}
.drop_menu li:hover ul li a {
    padding:1px 4px;
    display:block;
    width:150px;
    font-size: 11px;
    text-indent:11px;
    background-color:#10BDF5;
}
.drop_menu li:hover ul li a:hover { background:#51C7ED }

#panel {
    background: #10BDF5;
    color: #FFF;
    font-size: 11px;
    text-align: left;
    border: 1px solid #30B3DE;
    padding: 3px 4px
        
}

<div id="panel">
    <ul class="drop_menu">
    <li><a href="upgrade.php">Upgrade Account</a></li>
    <li><a href="link.php">Link One</a>
    	<ul>
    		<li><a href="link.php">link</a></li>
    		<li><a href="link.php">link</a></li>
    		<li><a href="link.php">link</a></li>
    	</ul>
    </li>
    <li><a href="link.php">Link Two</a></li>
    </ul>
</div>

2- WITH ANIMATION

/**RESETING BROWSER STYLE*/
*{box-sizing: border-box; padding: 0; margin: 0}

/**SETTING THE ROOT ELEMENT BACKGROUND*/
:root{background: #ccc}

/**REMOVING THE STYLE ON ALL LIST IN [id=panel]*/
[id=panel] li{
    list-style-type: none
}

/**INIT OUR DROP MENU*/
.drop_menu {
    background: #10BDF5;
    height: 25px
}
/* SUBMENU position:absolute AND OPACITY INSTEAD OF VISIBILITY and ease-out not ease-in*/
.drop_menu ul {
    position: absolute;
    left: 0;
    top: 28px;
    height: 0; /**SET THIS TO ZERO SINCE WE CAN'T ANIMATE display: none*/
    overflow: hidden; /**YOU NEED THIS TO HIDE THE LIST*/
    background:#51C7ED;
    border-bottom: 5px solid transparent;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    opacity: 0; /**DO NOT DISPLAY THE LIST ON INIT STATE*/
    transition:opacity 0.65s ease-out, height 0 0.68s linear /**TRANSITION ON OPACITY WITHOUT DELAY BUT ON HEIGHT WITH A DELAY GREATER OR EGAL THE OPACITY ANIMATION DURATION*/
}
.drop_menu li:hover ul {
    transition:height 0s ease-out ;/**TRANSITION ONLY ON HEIGHT*/
    opacity: 1;
    border-bottom: 5px solid #1292BB;
    height: 76px /**SET THE HEIGHT ON MOUVE IN*/
}
/**GIVING position: relative TO THE PARENT OF OUR UNORDERED LIST SINCE IT HAS position:absolute */

.drop_menu li { float:left; position: relative}
.drop_menu li a {
    padding:3px 6px;
    display:block;
    color:#FFF;
    text-decoration:none;
    font-size: 11px;
    line-height: 22px;
}




.drop_menu li:hover { position:relative; background:#51C7ED; }

.drop_menu ul a {
    padding:1px 4px;
    display:block;
    width:150px;
    font-size: 11px;
    text-indent:11px;
    background-color:#10BDF5;
}
.drop_menu li:hover ul li a {
    padding:1px 4px;
    display:block;
    width:150px;
    font-size: 11px;
    text-indent:11px;
    background-color:#10BDF5;
}
.drop_menu li:hover ul li a:hover { background:#51C7ED }

#panel {
    background: #10BDF5;
    color: #FFF;
    font-size: 11px;
    text-align: left;
    border: 1px solid #30B3DE;
    padding: 3px 4px
        
}

<div id="panel">
    <ul class="drop_menu">
    <li><a href="upgrade.php">Upgrade Account</a></li>
    <li><a href="link.php">Link One</a>
    	<ul>
    		<li><a href="link.php">link</a></li>
    		<li><a href="link.php">link</a></li>
    		<li><a href="link.php">link</a></li>
    	</ul>
    </li>
    <li><a href="link.php">Link Two</a></li>
    </ul>
</div>