jQuery dropdown menu hover state

Question

My problem is:

I have a drop down menu and i want that when I hover the menu the text color change and when I hover the submenu the hover state stays for both. I use this code:

$("ul li").hover(function () {

    $(this).stop().animate({ backgroundColor: "white"}, 500);

},
function () {

    $(this).stop().animate({ backgroundColor: "black"}, 400);

});

}

to animate the background-color on hover in menu and submenu.

I want to change the color of the text on hover to (diferent for menu and submenu, not the same color animation). For this I use this code:(Submenu example, for menu example, change the selector to $('ul.menu li a')

$('ul.submenu li a').hover(function () {

$(this).css({color:'#FFFFFF'});

},
function () {

$(this).css({color:'#00FF00'});

});

All This works fine, but when I hover the submenu the menu returns to the original color state (because the mouseleave is activated on menu hover out).

All I want is that when I hover submenu the hover state in menu stays active as well.

I've tried many things but all give me problems, only thing that works is css, but I need to control the text colors dinamically too.

CSS That Works:

ul li:hover a {
    color: #FFF;
}

(with this css code I control the menu color with the css and when I hovered the submenu the menu stays in active state, but the submenu works with jquery .hover).

Can anyone Help? Thanks!

HTML Menu:

<ul class="menu">

      <li><a href="#">text</a></li>

      <li><a href="#">text</a>

        <ul class="submenu">
          <li><a href="#">text</a></li>
          <li><a href="#">text</a></li>
          <li><a href="#">text</a></li>
        </ul>

      </li>

      <li><a href="#">text</a>

</ul>

Answer 1

If you want hover to set the current color until you hover some other li, use classes.

css:

ul.submenu li a { color: #0f0; }
ul.submenu li a.hovered { color: #fff; }

js:

$('ul.submenu li a').mouseover( function() {
   if (!$(this).hasClass('hovered')) {
      $('ul.submenu li a.hovered').removeClass('hovered');
      $(this).setClass('hovered');
   }
});

I hope I understood you correctly. Good luck with your project.

[edit]

Oh hm, maybe you want it so when you go off to the submenu, your parent li shouldn't lose its color, despite you mousing out. If so, the same idea is applicable, you'd just want that mouseover code to select on the menu item mouseover (so mousing over the menu unsets all other menus and sets this one), then you just also need to have it remove your menu's class color if you mouse out of its submenu's ul. I don't know what your menus look like structure-wise, so I can't comment on a working CSS for this selector.

Oh and finally you'd want to have a css rule vs. submenu hover to handle your submenu's highlighting.

Sorry for the rambling answer...