html - 如果子链接或孙链接使用 CSS 处于事件状态，则将父链接设置为事件

Question

我有一个 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;
}

fiddle :http://jsfiddle.net/kyvbzssd/

如果顶级父链接的任何子链接或其子链接具有事件类，我如何将其设置为事件？

Answer 1

也将样式添加到您的 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;
}