child items styling different from active parent

Question

I am working on a pretty simple menu with just one level of submenu items. I have managed to get the styling as I want it, only that once the parent item is selceted (it displays a background image)te submenu items then also display that background image, which shouldn;t happen.

Here is my css

#fav-nav .navigation li a:hover,
#fav-nav .navigation li.active a{
  color: #fff; 
background: url(../../../images/menu-back.png) no-repeat top;

}

#fav-nav .nav-child li a:hover,
#fav-nav .nav-child li a:active  {

background-image: none;
color: #fff;

}

Here is the html, sorry it's out of a joomla site, I hope I got all the relevant info here.:

<div class="navigation">
<div class="moduletable">
<ul class="nav menu">
<li class="item-102 deeper parent"><a href="#">FENCING</a>
<ul class="nav-child unstyled small">
<li class="item-106"><a href="#">Fence Panels</a></li>
<li class="item-107"><a href="#">Fence Posts</a></li>
<li class="item-108"><a href="#">Gates</a></li>
<li class="item-109"><a href="#">Gate Furniture</a></li></ul></li>
<li class="item-103 current active">
<a href="/noah/index.php/sawn-timber">TIMBER</a></li></ul>

</div>
                                        </div>
                                     </div>

Any help would be really appreciated. Thanks

it looks like css Inheritance, please see this question that may help you: [SO 1304465: how to prevent css inherit](http://stackoverflow.com/questions/1304465/how-to-prevent-css-inherit) — Our Man in Bananas, Jul 16 '14 at 16:11
You're probably going to need to show us your HTML as well. Can you make a fiddle of the code? — Ben Dyer, Jul 16 '14 at 16:12

score 0 · Answer 1 · answered Jul 16 '14 at 17:00

0

Make the following changes in your css

#fav-nav .nav-child li > a:hover,
#fav-nav .nav-child li > a:active  {
   background-image: none;
   color: #fff;
}

answered Jul 16 '14 at 17:00

amol

1,535
9
10

Well I have tried all of your suggestion without success. Now I have simply restructured my menu items. – Annika Bisson Jul 29 '14 at 11:55

child items styling different from active parent

1 Answers1