Highlighting top menu when its submenu is selected

Hi, My question is how do i keep the top menu highlighted (top level) when im visiting its submenu on the second level?

This is my CSS code:

/* Topmenu */
#header ul {width: 600px; list-style: none; margin: 0 10px 0 0; padding: 0;height: 160px;}
#header ul li {float: left;}
#header ul a {font-size: 10pt; color: #CCC; text-decoration: none; display: block;padding: 95px 10px 20px 10px;}
#header ul a:hover {color: #FFF; }
#header ul li.nav-selected a {color: #FFF; background: url(images/menubg.jpg) no-repeat ;}

/* sub menu */
#submenu ul {width: 600px;list-style: none; margin: -20px 10px 0 0; padding: 0;}
#submenu ul li {float: left;}
#submenu ul a {font-size: 10pt; color:#666; text-decoration: none; display: block; padding: 0px 10px 0px 10px;}
#submenu ul a:hover {color:#009a44;}
#submenu ul li.nav-selected a {color:#009a44;}

If I cant fix it in the CSS, where do i fix it?

You can see my site here:


Thanks in advance

View Replies: View Best Answer
jordif replied on at Permalink Best Answer Reply

yes, you can fix it in your CSS.

Try adding the following line to your css:

#header ul li.nav-path-selected a {color: #FFF; background: url(images/menubg.jpg) no-repeat ;}

(you see, the class "nav-path-selected" is added to the top menu item when the submenu is selected)

hope it helps!
artnvision replied on at Permalink Reply
Thank u so much, that was easy and its working perfectly :)