jQuery menu hover problem

I have a fairly simple menu:

<ul id="menu">
<!-- TemplateBeg开发者_高级运维inEditable name="mainmenu" -->
    <li><a href="index.htm" title="" class="home">Home</a></li>
    <li><a href="consumers.htm" title="" class="consumers">Consumers</a>
         <ul id="consumer-menu">
            <li> --snip--

and:

    $(document).ready(function() {
        $('.consumers').hover( function() {
            $("#consumer-menu").fadeIn();
        }, function() {
            $("#consumer-menu").fadeOut();
        });
    });

The problem is that when you move your mouse away from <li class="consumers".. #consumer-menu dissapears (as it should), I've tried using $('.consumers, #consumer-menu also but that doesn't work (you mouse out from #consumer-menu to .consumers and the menu fades out then in again.)

What I think I need is a way to select both .consumers AND all it's children in one jQuery selector statement, perhaps something like $('.consumers > * (but including .consumers).

Thanks for helping!

John.

The simplest answer I can think of given the context is to restructure your HTML like this:

<ul id="menu">
<!-- TemplateBeginEditable name="mainmenu" -->
    <li><a href="index.htm" title="" class="home">Home</a></li>
    <li class="consumers"><a href="consumers.htm" title="">Consumers</a>
         <ul id="consumer-menu">
             <li>test</li>
             <li>test</li>
         </ul>
    </li>
</ul>

which should work out with the jQuery unchanged.

(tested with http://jsfiddle.net/MgbdN/)

What do you think of the solution here: http://jsfiddle.net/WDktv/

basically, whenever you hover over a ul (or a menu node, to be more general), then you should fade in its child menu ul (menu node)

<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li>
    <a href="#">Three (+)</a>
    <ul style="display:none;">
        <li><a href="#">Three and a half</a></li>
        <li><a href="#">Three and three quarters</a></li>
    </ul>
</li>
<li><a href="#">Four</a></li>

$('li').hover(
    function(){$("ul", this).fadeIn()}, 
    function(){$("ul", this).fadeOut()})