I have another problem in a jquery dropdown menu.
In my example (link in the bottom) I want that when I hover the 3ºlevel Submenu the text color of the current submenu item stays in hover state (color yellow in example).
Link To Live Example with complete Code
I have comments in the code to explain where is the problem.
Thanks
I updated your fiddle here to fix the problem.
I shifted the hover from ul.submenu li a to just be ul.submenu li so that when its submenu2 was hovered over it didn't call the unhover function. I then applied the styles in the functions to the .children('a') tags, like so:
$('ul.submenu li').hover(function() {
$(this).children('a').css({
color: '#eff803'
});
$(this).find(".submenu li:first a").stop().animate({
backgroundColor: '#0d0167'
});
}, function() {
$(this).children('a').css({
color: '#ffffff'
});
$(this).find(".submenu li:first a").stop().animate({
backgroundColor: '#0000FF'
});
});
for a start, avoid css() where you can. you're better off using addClass() and removeClass(). define a hover class that contains the colours you want then (assuming your menu is not inside another <ol> or <ul>) use something like
$('.menu a').hover(function() {
var $path = $(this).parents('li').find('> a').not(this);
$(this).closest('.menu').find('a').not($path).removeClass('hover');
$path.addClass('hover');
//code that animates to the colours in your hover class
$(this).addClass('hover').css('');//make it stick
});
edit: sorry didn't think about the fading in of styles
