Submenu disappears

CSS:

ul.topnav {
list-style: none;
margin: 0px;
padding: 0px;
display: inline;
}

ul.topnav li {
position: relative;
display: inline;
margin: 0px;
padding: 0px;
}

ul.topnav li span.subhover {background-position: center bottom; 开发者_开发百科cursor: pointer;}

ul.topnav li ul.subnav {
list-style: none;
position: absolute;
display: none;
background-color: black;
margin: 0px;
padding: 0px;
border: 1px solid gray;
}

ul.topnav li ul.subnav li {
width: 170px;
margin: 0px;
padding: 0px;
}

HTML:

<ul class="topnav">  
    <li><a href="#">Home</a></li>  
    <li>  
        <a href="#">Tutorials</a>  
        <ul class="subnav">  
            <li><a href="#">Sub Nav Link</a></li>  
            <li><a href="#">Sub Nav Link</a></li>  
        </ul>  
    </li>
</ul>

Javascript/JQuery:

$(document).ready(function() {
        $("ul.subnav").parent().append("<span>^</span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)  
        $("ul.topnav li span").click(function() { //When trigger is clicked...  

        //Following events are applied to the subnav itself (moving subnav up and down)  
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click  
        $(this).parent().hover(function() {}, function(){  
                $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
        });  

        //Following events are applied to the trigger (Hover events for the trigger)  
        }).hover(function() {  
            $(this).addClass("subhover"); //On hover over, add class "subhover"  
        }, function(){  //On Hover Out  
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"  
        });
 });

The menu will show when the <span>^</span> is clicked, but the moment you want to select a sub item, the menu disappears.

What happens is you're no longer hovering so

$(this).parent().hover(function() {}, function(){  
                $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
        }); 

this is being called. What you have to do is put an invisible div behind the nav of whatever size you see fit, then use .mouseout() to call the .slideup().