jQuery hover mouseleave function triggers when hovering over child div

Question

I have a main nav menu with a sub-menu that appears as a drop-down using jQuery's hover() functions. The idea is that the sub-menu slides down when its parent <li id="info-link"> is hovered over, and slides up when the mouse leaves <li id="info-link"> (including all of its children).

I achieved the effect successfully when building a static version of the page, i.e. the sub-menu would appear, and I could move the mouse over both items in the sub-menu, and click on them without the sub-menu sliding up. However, when I moved everything over into wordpress, the hover function does not seem to include <li id="info-link">'s children. Put simply, hovering over <li id="info-link"> causes the sub-menu to appear, but entering the sub-menu causes it to slide back up. (Sorry if this is badly-explained! I'm making as much sense as I can!)

I can't understand what has changed, as the exact same code works exactly as expected outside of wordpress...

HTML and 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);
        });
    }
});});

UPDATE: The following jsfiddle contains all the working code. As you can see in the fiddle, the desired effect is present, which (while slightly reassuring!) makes me even more confused that the effect doesn't work on the wordpress version of the site.

jsfiddle

Answer 1

Okay I've fixed it. I'm not entirely sure how, but it's done! As I had yet to replace the given code in the index.php of the theme I am using, I continued to do so while I waited for a response on this question. Magically, once the rest of my page code was loaded, the hover function worked completely.

I can only assume that this was either a collapsing issue that the .group class hadn't resolved without the remaining page code, or possibly a clash of z-index items.

Apologies for not providing more information, but it could potentially take quite some time to track down the specific cause of the issue. My advice from this would be to fill in all the html and css before worrying about getting the JS working!