Question

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

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

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

1 个答案: