Div не отображается при наведении курсора и использовании .hover () jQuery

У меня горизонтальная навигация с 1px высоким делением по умолчанию. Когда я наводю курсор мыши на элемент меню, я скрываю этот div в 1 пиксель и вместо этого показываю еще один div с высотой, основанной на количестве дочерних сайтов для элемента меню, над которым я наведите курсор. Когда я покидаю пункт меню, я хочу скрыть новый div и вместо этого снова отобразить div 1px. Моя проблема в том, что если я быстро наведу курсор на элемент и сразу же уйду, 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;
}