快速悬停并使用.hover（）jQuery时不显示Div

Question

默认情况下我有一个1px高div的水平导航。当我将鼠标悬停在一个菜单项上时，我隐藏了这个1px div，而是根据我悬停在上面的菜单项的子网站数显示另一个高度div。当我离开菜单项时，我想隐藏新的div，而是再次显示1px div。我的问题是，如果我快速将鼠标悬停在一个项目上并立即离开，则不会显示1px div，但如果我慢慢地（例如0.5秒）执行此操作，则会显示。

如果我快速悬停/ #CustomNavBottomBorder，下面脚本中的内容会导致li.dynamic-children无法显示？

$('#CustomNav').mouseleave(function() {
    $('#CustomNavBottomBorder').fadeIn('slow');
});


$('li.dynamic-children').hover(function() {         
        var itemHeight = 32; // height in pixels per item
        var divHeight;

        // Calculate height of div based on number of menu items
        var $menuItems = $(this).find('ul').children();
        var numberOfMenuItems = $menuItems.length;

        window.setTimeout(function() {$('#CustomNavBottomBorder').hide();}, 250);   
        $menuItems.each(function() {$(this).hide().delay(520).show(10);});      
        divHeight = itemHeight * numberOfMenuItems;

        $('#DropdownMenuBox').stop(true,true).animate({height: divHeight + "px"}).slideDown(300);
    },
    function() {            
        $('#DropdownMenuBox').stop(true,true).delay(400).slideUp(500);
            window.setTimeout(function() {$('#CustomNavBottomBorder').removeClass('customNavOn');}, 800);
        }
    );


.customNavOn {
    display:none;
}