mouseleave
イベントを #dropdown
要素にバインドすると、ユーザーがドロップダウンをマウス・アウトするまでドロップダウンが保持されます。
//Note: no need for the `li` here as there will only be 1 element with this id on the document
$('#menu-item-20').bind('mouseenter', function() {
$("#dropdown").stop(true, true).fadeIn(500);
});
$('#menu-nav').children('.menu-item').not('#menu-item-20').bind('mouseenter', function() {
$("#dropdown").stop(true, true).fadeOut(500);
});
$('#dropdown').bind('mouseleave', function() {
$("#dropdown").stop(true, true).fadeOut(500);
});
Here is a jsfiddle of the above solution: http://jsfiddle.net/jasper/kED9T/2/