Help with jQuery menu

Question

Html:

<ul id="menu">
    <li>Menu 1</li>
    <li>Menu 2
        <ul>
            <li class="submenu">something</li>
        </ul>
    </li>
    <li>Menu 3</li>
</ul>

jQuery:

$('#menu > li:has(.submenu)').hover(function() {
    $(this).children('ul').show().addClass('active');
}, function() {
    $(this).children('ul').hide().removeClass('active');    
});

http://jsfiddle.net/mXTzy/

Now if .submenu is being shown, I want the parent li to have the class active (and removed on mouseout).

I'd appreciate any help with this.

Many thanks

Answer 1

Are you looking for this?

jsFiddle

$('#menu > li').hover(function() {
    $(this).children('ul').show();
    $(this).addClass('active');
}, function() {
    $(this).children('ul').hide();  
   $(this).removeClass('active');  
});

#meun li { float: left; }
#menu li a { float; left; padding:10px; }
#menu li ul { display: none; }
#menu li.active  { background:#dd0; }

<ul id="menu">
    <li>Menu 1</li>
    <li>Menu 2
        <ul>
            <li class="submenu">something</li>
        </ul>
    </li>
    <li>Menu 3</li>
</ul>

Answer 2

idk if this will help you or not, but...

1. try use :contains selector (http://api.jquery.com/contains-selector/)
2. you can use toggleClass ( http://api.jquery.com/toggleClass/ )

Answer 3

Okay, figured:

$('#menu > li:has(.submenu)').hover(function() {
    $(this).addClass('active').children('ul').show();
}, function() {
    $(this).removeClass('active').children('ul').hide();    
});

.. a bit ugly though.