Question

好的，这真让我恼火！我已经在网上进行了一个小时的研究。好吧，我添加了＃top-section li：hover a所以当我还在子菜单中时，它会保持父链接悬停。 Welp，我的问题是它也改变了子菜单的链接颜色。当链接被认为是灰色时。

在＃top-section ul ul li a中，我的颜色为＃8b8b8b。但＃top-section li：hover 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;
    }

我只是不知道为什么它会在列出第二个时覆盖它...而且它直接在子菜单上进行... 有人可以帮助我吗？

这是完整的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;
    }

Answer 1

如果我正确地读到这个，使用组合器>应该可以解决这个问题：

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

示例：http://jsfiddle.net/unbws/

[编辑]

我添加此答案作为替代方案的原因归结为this link on why to not use !important lavabeams在另一个答案的评论中共享。

Answer 2

说明第二个颜色值并不意味着它具有优先权。例如，使用!important： color: #8b8b8b !important;。如果这不起作用，那么再看看你的css，你的元素有很多重叠，所以可能就是这样。

<li>父级悬停改变子级别的颜色</li>

2 个答案: