Hello everyone, I have successfully implemented a jquery-based multilevel navigation menu. When hovering over each subnav, it appears directly below the clicked list item. However, I am encountering an issue where the background color of the selected parent item does not change along with the subnav background. Oddly enough, this functionality works in Internet Explorer but not in Firefox. Below is the jquery script that I have created.
See Demo - http://jsfiddle.net/pixelfx/xRVVv/4/
$(document).ready(function() {
$("ul#topnav li").hover(function() { //Hover event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'});
$("ul#topnav li.active1").css({ 'background' : 'CCFFCC'});
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'});
$(this).find("span").hide(); //Hide the subnav
$(this).find("span.active").show(); //Hide the subnav
$(this).find("li.active1").show(); //Hide the subnav
$("li.active1").css({ 'background' : '1376c9'});
});
});