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 );
}