Проблема с меню CSS в Google Chrome

Question

Я использую стандартную sharepoint: aspmenu элемент управления навигацией на моей главной странице, и с помощью некоторого jQuery я отображаю div в меню с высотой, основанной на количестве элементов подменю, над основным элементом, над которым я наведите курсор мыши. есть.

Если навигация:

Products | About us | Contact us

и продукты имеют 10 подпунктов, дополнительный отображаемый элемент div будет вдвое больше, чем если бы я наводил курсор на «О нас» с 5 подпунктами. Причина, по которой я использую div, заключается в том, что я хочу перенести весь контент на страницу вместо обычного меню css, которое отображает пункты меню над основным контентом.

Проблема, с которой я столкнулся, заключается в том, что если я наведу указатель мыши на элемент меню, пока страница все еще загружается, я вообще не смогу видеть элементы подменю ни для одного основного элемента, даже если страница завершает загрузку (в Chrome). Если я не перемещаю мышь, когда страница загружается или где-либо еще на странице, кроме меню, тогда она работает так же хорошо, как и во всех других браузерах.

Сценарий:

var i = new Array();
$('li.dynamic-children').find('ul').each(function() {
    var $items = $(this).children();
    var itemCount = $items.length;
    i.push(itemCount);      
    if(itemCount > 7)
    {
        $items.addClass('multiColumn');
    }
});


// Hide/show full width div under menu on hover
$('li.dynamic-children').mouseenter(function() {            
        var itemHeight = 32; // height in pixels per item
        var divHeight;                  

        // Calculate height of div based on number of menu items
        var $menuList = $(this).find('ul');
        var numberOfMenuItems = i[$(this).index()];

        $menuList.hide().delay(700).fadeIn(500);

        divHeight = itemHeight * numberOfMenuItems;

        $('#DropdownMenuBox').stop(true,true).animate({height: divHeight + "px"}).slideDown(700);
    }).mouseleave(function() {          
        $('#DropdownMenuBox').stop(true,true).delay(400).slideUp(700);          
    });

Если я уберу строку

$('#DropdownMenuBox').stop(true,true).animate({height: divHeight + "px"}).slideDown(700);

тогда у меня нет проблем в Chrome, кроме того, что я не получаю нужный эффект, поэтому мне интересно, почему эта строка вызывает проблемы в Chrome, а не в любом другом браузере? У элементов подменю есть класс с левым: -999, и он не удаляется в chrome, когда я наводю курсор мыши на элемент меню во время загрузки страницы.

Я начал создавать jsfiddle, но продукт html sharepoint слишком короток, чтобы можно было найти хорошую скрипку, отображающую мою проблему.

Есть идеи, почему Chrome не нравится выделенная строка выше?

edit: до сих пор не понял, и временное решение - скрыть навигацию на ~ 500 мс при загрузке страницы, чтобы невозможно было наводить курсор на какие-либо элементы, пока страница не закончит загрузку. Хотя это немного липко.

Заранее спасибо.