Highlighting top menu when its submenu is selected
Permalink
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:
http://palmgrenskolutveckling.se/test-annika/annika-under-tva...
Thanks in advance
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:
http://palmgrenskolutveckling.se/test-annika/annika-under-tva...
Thanks in advance
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!