jquery - When hovering over parent li make child li color white and vice versa -

first let me describe problem i'm having. please visit http://dev.eduantech.com/about-me know i'm talking about. has page, can't home page can see i'm talking about.

ok please hover on menu, @ least 1 has sub-menu in it. notice when hover on parent li child li becomes "invisible", since it's same color background. vice-versa if hover on child element.

what need figure out, i'm sure guessed, whenever mouse on top of either of these makes other 1 white well.

i have following sorta pseudo-code worked out:

$('li.menu-parent-current > li.menu-child-current a').hover(     function() {         $(this).css('color', '#fdfdfd');     }, function() {         if (/* mouse leaves parent */) {             // change child color blue         } else if (/* mouse did not leave parent */) {             // make child color white             $(this).css('color', '#fdfdfd');         }     }); 

there's room improvement on this, no doubt, go ahead , give better version if necessary. :)

i've been past couple of hours on can't solve it, i'm sure it's simple, i'm no jquery expert. can provide. :)

edit:

well... turns out on complicating it. being relative newbie doesn't let think correctly. :p

you can css , jquery.

if css:

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

and if want jquery:

$('ul li').hover(   function(){$(this).find('a').css('color','#fff');},   function(){$(this).find('a').css('color','##36c');} );