CODEWITHSUNDEEP
jquerycssmenu
Ravi
Ravi

Reputation: 4075

jquery multi level menu

Hi all I have created a jquery based multilevel nav menu, when onMouse each subnav appears directly underneath the hovered/clicked list item. The problem now i am having is the selected parent item's bg-color is not getting changed as same the subnav bg. Strangely it is working in IE not in FF. This is the jquery script that i have written.

Demo - http://jsfiddle.net/pixelfx/xRVVv/4/

  $(document).ready(function() {
  $("ul#topnav li").hover(function() { //Hover over 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'}); 
 });});

Upvotes: 0

Views: 881

Answers (1)

clairesuzy
clairesuzy

Reputation: 27624

.css({ 'background' : 'CCFFCC'});

.css({ 'background' : '1376c9'});

you're missing the #mark before the colors.. does adding it help?

OK edited a fiddle, correcting the color codes and getting what I think you want, i.e. for the active1 tab to remain highlighted except when the others are hovered hovered on..

is this what you're after - jsfiddle

Upvotes: 1

Related Questions