0

好吧，这真的让我很生气！我已经做了一个小时加上在线研究。好吧，我添加了#top-section li:hover a 所以当我还在子菜单中时，它会保持父链接悬停。韦尔普，我的问题是它也改变了子菜单的链接颜色。当链接假设为灰色时。

在#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;
    }

我只是不知道为什么它排在第二位时会覆盖它..它会直接出现在子菜单 li a's... 有人可以帮帮我吗？

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

2 回答 2

1

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

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

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

[编辑]

我添加此答案作为替代方法的原因在此链接中总结了为什么不使用 !important由lavabeams在另一个答案的评论中共享。

于 2012-11-29T01:49:55.057 回答
-2

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

于 2012-11-29T01:34:49.763 回答