let's say I have a menu as follows:
<div class="menu">
<ul>
<li>dogs</li>
<ul><li>--dog food</li>
<li>--dog collars</li>
</ul>
<li>cats</li>
<li>hamster</li>
</ul>
</div>
CSS code: .menu ul li a:hover, li.active a{background: url(../images/menu-active.png) no-repeat;}
I have set css sheet to show a background image when the item is hovered or active to show users which menu item they are currently on.
Now the problem I have is the submenu is also showing this background image when the parent menu is active. How do I code the css so that the background image only shows in the parent when active and not in the submenu? Basically, I only want the background image to show on the menu that is active. So if the submenu is active, I only want the background image to show there and in no other menu item. Thanks for the help.
<div class="menu">
<ul>
<li>dogs</li>
<ul><li>--dog food</li>
<li>--dog collars</li>
</ul>
<li>cats</li>
<li>hamster</li>
</ul>
</div>
CSS code: .menu ul li a:hover, li.active a{background: url(../images/menu-active.png) no-repeat;}
I have set css sheet to show a background image when the item is hovered or active to show users which menu item they are currently on.
Now the problem I have is the submenu is also showing this background image when the parent menu is active. How do I code the css so that the background image only shows in the parent when active and not in the submenu? Basically, I only want the background image to show on the menu that is active. So if the submenu is active, I only want the background image to show there and in no other menu item. Thanks for the help.