Can hover() react on elements which do not exist at mouseenter?

Question

I work with a navigation which looks like this:

<div id="navigation">
<ul>
    <li>One
        <ul>
            <li>One1</li>
            <li>One2</li>
            <li>One3</li>
            <li>One4</li>
        </ul>
    </li>
    <li>Two
        <ul>
            <li>Two1</li>
            <li>Two2</li>
            <li>Two3</li>
            <li>Two4</li>
        </ul>
    </li>
    <li>Three
        <ul>
            <li>Three1</li>
            <li>Three2</li>
            <li>Three3</li>
            <li>Three4</li>
        </ul>
    </li>
    <li>Four</li>
    <li>Five</li>
</ul>
<div id="subnavigation">
</div>

The is generated by a CMS. The subentries and the #subnavigation of the list are not displayed:

#navigation>ul>li>ul>li {
display: none;
}
#subnavigation {
    display: none;
}

When the mouse goes over "One", "Two", "Three".. I copy the subentries into the subnavigation div. It shoud stay there and should be displayed as long as the mouse is either on the navigation or on the subnavigation.

This is what the following javascript code should do. It displays and hides the subnavigation:

// display and hide subnavigation bar
$(function(){
    $('#navigation,#subnavigation>ul>li').hover(function(e){
        $('#subnavigation').show();
    },function(e){
        $('#subnavigation').hide();
    });
});

When the mouse hovers for example "Two" in the navigation then the subnavigation with "Two1", "Two2"... is displayed. A problem occurs when mouse hovers for example "Two2": Then the subnavigation disappears. However, it does not disappear when the mouse hovers the part of the subnavigation which is not taken by a list element.

When $('#navigation,#subnavigation>ul>li').hover occurs #subnavigation>ul>li does no yet exist. It is possible that because of this jquery does not "notice" when the mouse leaves #navigation but not #subnavigation>ul>li ? If yes, what are common solutions for that problem?

Thanks for helping!

Answer 1

Try this: DEMO

HTML Code:

<div id="navigation">
<ul>
    <li>One
        <ul class="subnavigation">
            <li>One1</li>
            <li>One2</li>
            <li>One3</li>
            <li>One4</li>
        </ul>
    </li>
    <li>Two
        <ul class="subnavigation">
            <li>Two1</li>
            <li>Two2</li>
            <li>Two3</li>
            <li>Two4</li>
        </ul>
    </li>
    <li>Three
        <ul class="subnavigation">
            <li>Three1</li>
            <li>Three2</li>
            <li>Three3</li>
            <li>Three4</li>
        </ul>
    </li>
    <li>Four</li>
    <li>Five</li>
</ul>
</div>

CSS Code:

#navigation>ul>li {
    float:left;
    list-style:none;
    padding:5px;
}
ul.subnavigation {
  display: none;
}

Jquery Code:

$(function(){
    $('#navigation ul li').hover(function(e){
        $(this).find('.subnavigation').show();
    },function(e){
        //alert($(e.target).parent("ul").hasClass('.subnavigation'))
        if(!$(e.target).parent("ul").hasClass('subnavigation')){
            $('.subnavigation').hide();
        }
    });
});

DEMO