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.