html - 子项样式与事件父项不同

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