css什么叫活动状态,html – 如果孩子或孙子链接使用CSS活动,则设置父链接处于活动状态...

我有一个HTML / CSS菜单与这个CSS的活动链接：

.navigation ul li a:hover,.navigation .active-nav {

background-color: #F36F25; /*#373737;*/

text-shadow: none;

color: #f7f7f7 !important;

-webkit-Box-shadow: 0 3px 0 #ff8833;

Box-shadow: 0 3px 0 #ff8833;

}

如果任何一个孩子或其孩子的子链接有一个活动的类，我如何将顶级父链接设置为活动的？

将样式添加到您的li元素：

http://jsfiddle.net/kyvbzssd/3/

.navigation ul li{

padding: 80px 9px 10px;

}

.navigation ul li a,.navigation ul li{

font-size: 13px;

font-weight: 700;

color: #4d4d4d;

text-decoration: none;

display: inline-block;

margin-bottom: 0;

text-transform: uppercase;

border-bottom: 2px solid #fff;

-webkit-transition: background-color .2s linear,padding-top .2s linear;

-moz-transition: background-color .2s linear,padding-top .2s linear;

-o-transition: background-color .2s linear,padding-top .2s linear;

-ms-transition: background-color .2s linear,padding-top .2s linear;

transition: background-color .2s linear,padding-top .2s linear;

}

.navigation ul li a:hover,.navigation ul li:hover,.navigation .active-nav {

background-color: #F36F25; /*#373737;*/

text-shadow: none;

color: #f7f7f7!important;

-webkit-Box-shadow: 0 3px 0 #ff8833;

Box-shadow: 0 3px 0 #ff8833;

}