CSS Dropdown Menu On :Hover

If I "unhover" previously hovered dropdown menu and then fast enought hover the space it was shown at back, dropdown will show back. Is there a way to avoid this behaviour or at least change the timing at which you can hover back dropdown area to very low value without changing overall menu transition timing. I'm trying to make dropdown show only on li:hover action.

Demo menu: http://jsfiddle.net/q7gFR/

#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a {
-webkit-transition: all ease .3s;
-o-transition: all ease .3s;
-moz-transition: all ease .3s;
-ms-transition: all ease .3s;
transition: all ease .3s;


Edit (As you commented) : Answer is NO, you cannot get this behavior fixed unless you take out the transition and initiate it on :hover

Use the transition property on :hover so that when you :hover out, it will just disappear in a flick without any transition..

Demo (Increased on :hover time just for demonstration purpose)

Need Your Help

Proper way to calculate the height and width of a SVG text

text svg height width

I need to calculate the height and width of a svg text element. Is there a way to do so without actually adding it to the DOM of my page? I need only the measures not the actual element.

JavaScript Global mouse hook

javascript jquery css html5

Hello i have a web based slideshow, which is basically an amount of pages that is called using a timer.