jQuery выпадающий навигация, некоторые элементы не прячутся при наведении мыши

Question

У меня есть горизонтальная многоуровневая навигация с использованием UL, которая отлично работает, если вы наводите курсор на элементы контролируемым образом, но как только вы ускоряете вещи, перемещая мышь быстрее - элементы либо «прилипают» к «показывать «статус» и не скрывать снова, пока вы не наведете курсор на них еще раз.

Кроме того, при наведении курсора на элементы, такие как ul li на другой уровень ul li ul li, субэлемент исчезает, если вас нетна один пиксель при перемещении мыши.Технически это то, что должен делать скрипт, но как добавить небольшую задержку?

Вот мой jquery:

$(function() {
$('ul.sub-menu').hide();
$('.sub-menu ul').hide();

$('#menu-navigation li').hover(function(){
    $(this).children('ul').slideDown("fast");
    },
function(){
    $(this).children('ul').hide();
});

$('#menu-navigation ul li').hover(function(){
    $(this).children('ul').slideDown("fast");
    },
function(){
    $(this).children('ul').hide();
});

});

Answer 1

Попробуйте:

function(){
  var element=this;
  Timeout( function(){
    $(element).find('>ul').fadeOut('slow')
    }, 2000 );
}