在子链接处于活动状态时激活父链接

Question

我有这个CSS菜单 - 小提琴：http://jsfiddle.net/xqwq6uL7/

.navigation-simple ul li a:hover,
.navigation-simple .active-nav,
.navigation-simple ul .dropdown>a,
.navigation-light ul li a:hover,.navigation-light .active-nav,
.navigation-light ul .dropdown>a {
    text-shadow: none;
    color: #ff8833;
}

如何在css中设置父链接在子链接处于活动状态时处于活动状态？

Answer 1

你不能在纯CSS中做到这一点。您必须使用JavaScript解决方案，例如在jQuery中实现的:has选择器：http://api.jquery.com/has-selector/

Answer 2

我认为您的.active-nav是<a>元素。

您可以将班级active-nav移至<li>元素，然后同时选择：

.navigation-simple .active-nav, .navigation-simple .active-nav a { }

如果是:hover：

.navigation-simple ul li:hover, .navigation-simple ul li:hover a { }