jQuery .slideDown приводит к тому, что элемент достигает go полной высоты области просмотра при начальном наведении

Question

В настоящее время создается этот сайт http://cqm33634.dev14.sociusinc.com/

Если вы наведете курсор на пункт меню продуктов в навигационной панели, вы увидите, что высота подменю простирается до полной высоты экрана очень кратко, но только при первом наведении. Кажется, не могу понять, что вызывает это. Я не хочу добавлять максимальную высоту к функции запуска, потому что в будущем могут быть добавлены новые элементы подменю.

Вот мой код:

   var isHovered = $('.site-navigation #menu-main-navigation li.mega-menu >ul.sub-menu').is(':hover');

$('.site-navigation #menu-main-navigation li.mega-menu').mouseenter(function () {
    $(this).find('> ul.sub-menu').stop(true, true).slideDown({
        easing: 'swing',
        start: function () {
            jQuery(this).css('display', 'flex');
        }
    })
}).mouseleave(function () {
    if (!isHovered) {
        $(this).find('> ul.sub-menu').slideUp('fast', function () {});
    }
});

Любые указания будут очень благодарны.