Функция jQuery hover mouseleave срабатывает при наведении курсора на дочерний div

У меня есть главное навигационное меню с подменю, которое отображается в виде раскрывающегося списка с использованием функций jQuery hover(). Идея состоит в том, что подменю скользит вниз, когда его родитель <li id="info-link"> находится над ним, и скользит вверх, когда мышь покидает <li id="info-link"> (включая все его дочерние элементы).

Я успешно добился эффекта при создании статической версии страницы, то есть появилось подменю, и я мог навести указатель мыши на оба элемента в подменю и щелкнуть по ним без скольжения подменю вверх. Однако, когда я переместил все в WordPress, функция наведения, похоже, не включает дочерние элементы <li id="info-link">. Проще говоря, наведение курсора на <li id="info-link"> вызывает появление подменю, но вход в подменю заставляет его скользить обратно вверх. (Извините, если это плохо объяснено! Я объясняю все, что могу!)

Я не могу понять, что изменилось, так как точно такой же код работает точно так же, как и ожидалось за пределами WordPress...

HTML и JQuery:

<nav id="main-menu">
        <ul class="group" id="main-menu-items">
            <li><a href="" class="heading-text">Home</a></li>
            <li><a href="" class="heading-text">Blog</a></li>
            <li><a href="" class="heading-text">Portfolio</a></li>
            <li><a href="" class="heading-text">Events</a></li>
            <li><a href="" class="heading-text">Pricing</a></li>
            <li id="info-link">
                <a href="" class="heading-text">Info<span></span></a>
                <div>
                    <ul id="info-drop-menu">
                        <li><a href="" class="heading-text">About</a></li>
                        <li><a href="" class="heading-text">Top Tips</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="" class="heading-text">Contact</a></li>
        </ul>
    </nav><!-- end main menu -->

jQuery(document).ready(function($){
$("#info-link").hover(function(){
    if(screenSize > 850){
        $(this).children("div").height(ulHeight + 2);
        $("#info-drop-menu").css("top",-ulHeight - 2);
        $("#info-drop-menu").animate({
            top:0
        },300);
    }
},function(){
    if(screenSize > 850){
        $("#info-drop-menu").animate({
            top:-ulHeight -2
        },300,function(){
            $("#info-link div").height(0);
        });
    }
});});

ОБНОВЛЕНИЕ: Следующий jsfiddle содержит весь рабочий код. Как вы можете видеть в скрипке, желаемый эффект присутствует, что (хотя и немного обнадеживает!) еще больше меня смущает, что эффект не работает на версии сайта для wordpress.

jsfiddle