Correct way to do a jQuery hover dropdown menu (without glitchyness) -

what bulletproof dropdown menu code in jquery?

edit: wanted share final solution based on answers below, find best dropdown solution have found far. rely's on http://cherne.net/brian/resources/jquery.hoverintent.html links don't make answers, leave code inline here incase disappears in future.

/*!  * hoverintent r7 // 2013.03.11 // jquery 1.9.1+  * http://cherne.net/brian/resources/jquery.hoverintent.html  *  * may use hoverintent under terms of mit license.  * copyright 2007, 2013 brian cherne  */ (function(e){e.fn.hoverintent=function(t,n,r){var i={interval:100,sensitivity:7,timeout:0};if(typeof t==="object"){i=e.extend(i,t)}else if(e.isfunction(n)){i=e.extend(i,{over:t,out:n,selector:r})}else{i=e.extend(i,{over:t,out:t,selector:n})}var s,o,u,a;var f=function(e){s=e.pagex;o=e.pagey};var l=function(t,n){n.hoverintent_t=cleartimeout(n.hoverintent_t);if(math.abs(u-s)+math.abs(a-o)<i.sensitivity){e(n).off("mousemove.hoverintent",f);n.hoverintent_s=1;return i.over.apply(n,[t])}else{u=s;a=o;n.hoverintent_t=settimeout(function(){l(t,n)},i.interval)}};var c=function(e,t){t.hoverintent_t=cleartimeout(t.hoverintent_t);t.hoverintent_s=0;return i.out.apply(t,[e])};var h=function(t){var n=jquery.extend({},t);var r=this;if(r.hoverintent_t){r.hoverintent_t=cleartimeout(r.hoverintent_t)}if(t.type=="mouseenter"){u=n.pagex;a=n.pagey;e(r).on("mousemove.hoverintent",f);if(r.hoverintent_s!=1){r.hoverintent_t=settimeout(function(){l(n,r)},i.interval)}}else{e(r).off("mousemove.hoverintent",f);if(r.hoverintent_s==1){r.hoverintent_t=settimeout(function(){c(n,r)},i.timeout)}}};return this.on({"mouseenter.hoverintent":h,"mouseleave.hoverintent":h},i.selector)}})(jquery)   $('.menu > li.menu-item').hoverintent(   function () {     $(this).addclass('active');     $(this).find('.sub-menu').slidedown('medium');   },    function () {     $(this).removeclass('active');     $(this).find('.sub-menu').slideup('medium', function(){       $(this).stop(true,true);     });   } ); 

when move mouse in , out new animation gets appended each time, not constant loop, stopped when animations finished. need add stop(true,true) stop previous animations. both true arguments mean clear animations queued element, , go end of animation.

good place after slideup animation finished

$('ul.file_menu').slideup('medium', function(){     $(this).stop(true,true);     }); 

see jsfiddle