LBF LBF - 3 months ago 18
HTML Question

CSS hover transition - how to remove delay?

I can't believe I am having trouble with a basic transition... but alas, I am. I can't actually find another post with this problem, so there must be something specifically wrong with my code.

I am doing a simple transition with max-height so that when you hover over a menu item, the sub-menu slides down, like so:

ul.sidenav ul {
padding:0;
margin:0;
list-style:none;
max-height:0;
overflow:hidden;
transition:max-height 1s ease-in-out;
}

ul.sidenav > li:hover > ul {max-height:999px;}


This works fine on mouseover, but on mouse-out there is a noticeable delay before it slides back up. I've tried various ease-in/ease-out settings, and I've tried adding a separate time to the mouse-out. But that delay remains.

What is going on? Here is a fiddle showing the problem:
http://jsfiddle.net/t5Wv2/8/

Answer

The problem here is you have ul.sidenav > li:hover > ul set to max-height: 999px

When you mouseout, it is taking 1 second to transition the max-height from 999px to 0px—you're just not seeing it happen.

Change the max-height to something closer to the actual height (i.e. 99px) and lower the transition-duration to 0.25s and you'll see a difference.

ul.sidenav ul {
  transition:max-height 0.25s ease-in-out;
}

ul.sidenav > li:hover > ul {max-height:99px;}

Keep in mind if you add more sub-menu items and the height exceeds 99px, the overflow will be hidden, so you'll have to increase the max-height to show the hidden items.