I'm sure someone has solved this but I can't seem to find the correct solution for it.

I am using Drupal Nice menus, and I am having problem keeping the top parent menu highlighted when I select a child. I have searched the Drupal website, and have tried a few solutions. I am new to CSS, but I have modified the nice_menu.css as follow to try to achieve my goal.

#nice-menu-1 li ul a:hover {
background: #A9A9A9;
}

.nice-menu li a {
text-decoration:none;
height: 38px;
color: #fff;
}

.nice-menu li a.active {
color: #509E90;
}

#nice-menu-1 .menuparent li a.active {
color: #509E90;
}

Unfortunately, it does not work. I would appreciate any help.

Thanks,
Myrlene

Comments

zanndoth’s picture

zanndoth commented

try
#nice-menu-1 .menuparent .over{
background-color: #509E90;
}

mayega’s picture

mayega commented

I have the same problem. When I try the code you suggested it has no effect. However, when I remove ".menuparent" it partially works but it appears to be affecting too many portions of the list as my other css formatting breaks. Here is the code I am using.

#nice-menu-1 .over{color:#fff; background:url(images/hover_bg.jpg) 0 0 repeat-x; margin:-10px 0 0 0; padding:17px 20px 0 20px !important; height:28px; font: bold 17px/18px 'Trebuchet MS'; text-decoration:none;}

* html #navigation ul li a{display: inline-block;}
#navigation ul li a:link, #navigation ul li a:visited{color:#ffffff;}
#navigation ul li a.selected{color:#fff;}
#navigation ul li a:hover{color:#fff; background:url(images/hover_bg.jpg) 0 0 repeat-x; margin:-10px 0 0 0; padding:17px 20px 0 20px !important; height:28px; font: bold 17px/18px 'Trebuchet MS'; text-decoration:none;}
#navigation ul li.active-trail a{color:#fff; background:url(images/hover_bg.jpg) 0 0 repeat-x; margin:-10px 0 0 0; padding:17px 10px 0 10px; height:28px; font: bold 17px/18px 'Trebuchet MS';}
#navigation ul li.active-trail a:hover{ color:#fff;}

vordude’s picture

vordude commented
Status: Active » Closed (won't fix)