How do I handle the hover in this recursive menu using jQuery?

Question

In my menu below, I have this in my CSS:

ul li ul {display:none;}

When a menu item is selected, I use this jQuery to show the children menu:

$('ul li.selected ul').show();

So I confused on how to handle hovers for the top level menu. When I hover over a top level menu item, how do I hide all sub-menus and show only the hovered items. But when hovering off it, I need it to show the li.select again as it originally was. How do I do this?

<div class="menu">
<ul>
    <li class="administration first selected">
        <a href="/administration.aspx"><span>Administration</span></a>
        <ul>
            <li class="users first"><a href="/administration/users.aspx"><span>Users</span></a></li>
            <li class="forms last"><a href="/administration/forms.aspx"><span>Forms</span></a></li>
        </ul>
        <div style="clear: both;"></div>
    </li>
    <li class="analytics"><a href="/analytics.aspx"><span>Analytics</span></a></li>
    <li class="options"><a href="/options.aspx"><span>Options</span></a></li>
    <li class="system last"><a href="/system.aspx"><span>System</span></a></li>
</ul>
</div>

Answer 1

It should just be $('ul li.selected:hover ul').show();. If not then please explain in greater detail exactly what you want.

Another way is to use:

$('ul li.selected').hover(
    function() {
        $(this).find("ul").show();
    },
    function() {
        $(this).find("ul").hide();
    }
);

See http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/ for a good example. If the code above doesnt work then use the page above - it has a good, working example of using .hover().

There are also all sorts of really cool effects you can get for show and hide - such as fade, blind and many more. Look up jQuery UI.

Answer 2

Check hover function.

   $('ul > li').hover(function() {
       // executed when mouse visits 'li'
       // hide all submenus except children of 'this' object
   }, function() {
       // executed when mouse leaves 'li'
       // hide all submenus except 'selected' ones
   });

Answer 3

To add to what Nikita said, something like below should work

$('div.menu ul > li').hover(function() {
     $(this).children('ul:first').show().end().siblings().children('ul:first').hide();
}, function() {
     $(this).children('ul:first').hide().end().siblings().children('ul:first').css('display','');
});

Otherwise, create another class, maybe a "hide" class with display:none; on it, and just add that class to the siblings and remove on hover out.