与活动父项不同的子项样式

Question

我正在制作一个非常简单的菜单，其中只有一级子菜单项。 我已经设法获得了我想要的样式，只有当父项被选中（它显示背景图像）后，子菜单项也会显示该背景图像，这不应该发生。

这是我的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;

}

这是 html，对不起，它来自一个 joomla 网站，我希望我在这里得到了所有相关信息。：

<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>

任何帮助将不胜感激。 谢谢

Answer 1

在您的 css 中进行以下更改

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