Css <；李>；父鼠标悬停更改子li的颜色

好吧，这真让我恼火！我已经做了一个多小时的在线研究了。我添加了#顶部部分li:hover a，因此当我仍在子菜单中时，它将保持父链接悬停。 嗯，我的问题是它也改变了子菜单的链接颜色。当链接假定为灰色时

在#顶部部分ul li a中，我的颜色为#8b。但是#顶部部分李：悬停a正在改变它们。。。这让我很恼火！ 除了jQuery之外，我找不到一种方法来修复它，这对我来说太混乱了，因为我讨厌仅仅依靠jQuery构建导航

这是我的CSS：

    #top-section li:hover a, #top-section li a:hover {
    background: #fff;
    color: #bb461d;
}

下面是正在更改的部分：

        #top-section ul ul li a {
        display: block;
        padding: 3px 4px;
        width: 156px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        color: #8b8b8b;
        font-weight: normal;
    }

我只是不知道为什么当它列在第二位时会覆盖它。。它直接在子菜单li a的。。。 有人能帮我吗

这是完整的CSS，但是如果你不需要它，你不需要阅读它。仅供参考：

    #top-section ul { list-style: none; }
#top-section li {
    display: block;
    float: left;
    position: relative;
    z-index: 500;
}
#top-section a {
    color: #b3b3b3;
    display: block;
    float: left;
    padding: 0 8px 0 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 9px 35px 9px 9px;
}
#top-section li:hover a, #top-section li a:hover {
    background: #fff;
    color: #bb461d;
}
    /*** nested list ***/
    #top-section ul ul {
        display: none;
        position: absolute;
        left: 0;
        margin: 32px 0 0 -1px;
        list-style: none;
        background: #fff;
        border: 1px solid #ababab;
        border-top: none;
        width: 312px;
    }
    #top-section ul ul li {
        width: 156px;
        margin: 0;
    }
    #top-section ul ul li a {
        display: block;
        padding: 3px 4px;
        width: 156px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        color: #8b8b8b;
        font-weight: normal;
    }
    #top-section ul ul li a:hover {
        color: #8b8b8b;
        background: #ececec;
    }

---

第二次声明颜色值并不意味着它具有优先权。使用

！重要信息

例如：

---

color:#8b！重要的。如果这不起作用，那么再看看你的css，你的元素有很多重叠，所以可能是这样。
如果我读对了，使用combinator
应该可以做到这一点：

#top-section ul li:hover > a, #top-section ul li > a:hover {
    background: #fff;
    color: #bb461d;
}

例如：

[编辑]

我添加此答案作为备选答案的原因总结在另一个答案的评论中。
我不建议使用！重要信息：尽可能考虑CSS的特殊性。参考昨天的一个问题：或见@subhaze的答案。aa詹姆斯·帕多尔西（James Padolsey）的一篇文章很好地总结了这一点：@Lavabeams它被应用于一个非常特殊的情况，它不像是为
div
设置的。我个人看不出有什么问题。@Omega！重要的不应该真的被使用，除非是IE6黑客，即使那样我也会建议不要使用。我必须同意@Lavabeams
！重要信息
不应在IE6:）中使用和保留。另外，感谢分享该链接！