CSS列表项悬停未正确应用

Question

我有一个我正在开发的网站：http://designs.totaleeyou.com/rnresources/。在主菜单项上我有一个li：hover：after effect（一个在li项目上方盘旋的tringle）。然而，这种悬停效果应该只应用于属于nav-pills类div的li，但是应用于没有nav-pills 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

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

Answer 2

由于Thgaskell答案的声誉，我无法添加评论。

为什么购买？页脚li：hover：after应仅适用于页脚元素，因为页脚的子项与页眉相同。如果我要为页眉和页脚的容器应用不同的背景颜色，则不会覆盖，因为容器仅被定义为父元素。

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

谢谢！