Div not being displayed when hover quickly and using .hover() jQuery

I have a horizontal navigation with a 1px high div under as default. When I hover over a menu item I hide this 1px div and instead show another div with height based on the number of subsites for the menu item I hover over. When I leave a menu item I want to hide the new div and instead display the 1px div again. My issue is that if I quickly hover over an item and leave immediately the 1px div is not displayed, but if I do it slowly (like 0.5 sec) it does.

What in the script below can cause #CustomNavBottomBorder to not be displayed if I hover/leave li.dynamic-children quickly?

$('#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;
}