CSS列表项悬停未正确应用

Question

我有一个我正在开发的网站：http://designs.totaleeyou.com/rnresources/.在主菜单项上，我有一个li:hover:after效果（一个悬停在li项上方的小饰物）。然而，这种悬停效应只适用于属于导航丸类div的li，而不适用于任何导航丸li。此外，li悬停在页眉处应为蓝色，在页脚处应为白色，但悬停效果仅将白色应用于两者，但当li处于活动状态时，将应用正确的颜色。

ul.menu {
    list-style-type:none;
}
ul.nav-pills {
    list-style-type:none;
    margin:0;
    padding:0;
}
header ul.nav-pills a {
    text-transform:uppercase;
    color:#17469e;
}
footer ul.nav-pills a {
    text-transform:uppercase;
    color:#ffffff;
}
ul.nav-pills a:hover,a:focus {
    color:#cf3b3b;
    transition:all 0.2s linear;
}
ul.nav-pills > li {
    position:relative;
    display:inline;
    margin:50px 0 0 50px;
}

ul.nav-pills > li + li {
    margin-left:40px;
}
ul.nav-pills li.active:after, li:hover:after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 15px;
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -15px;
    top: -35px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
header ul.nav-pills li.active:after, li:hover:after {
    border-color: #17469e transparent transparent transparent;
}
footer ul.nav-pills li.active:after, li:hover:after {
    border-color: #ffffff transparent transparent transparent;
}

Answer 1

因为我不能添加评论，因为声誉Thgaskell的答案...

为什么要买？页脚li:hover:after应仅应用于页脚元素，因为它是页脚的子元素，与页眉相同。如果要为页眉和页脚的容器应用不同的背景色，则不会进行覆盖，因为容器仅定义为父元素。

这就是为什么我感到困惑的原因，li.hover：后被分配给页脚和页眉元素，每个元素都有自己特定的颜色。li.active：页眉和页脚都能正常工作。为什么不li.hover：之后。

谢谢！

Answer 2

页脚的悬停规则将覆盖页眉，因为它们使用相同的选择器（li:hover:after），页脚将最后应用。