css下拉菜单覆盖子li的属性

Question

首先，我想补充说它已经有一段时间了，大约3年，因为我已经在CSS中开发了一个下拉菜单。我有这个下拉菜单，但我有以下问题。显然我无法覆盖我的子菜单的li / a元素的属性。

我想让子菜单的字体颜色与菜单的颜色相同，这些元素是浅灰色的（rgb） （206,206,204））

有人可以看看并指出我做错了什么吗？这是指向包含html，css和背景图片的源代码存档的链接： http://www.filedropper.com/001_17

Answer 1

您的问题在于此规则：

div ul.menu li:hover a{

    background-color: rgb(73,144,241);

    background-color: rgba(73,144,241,0.05);

    color: rgb(255,255,255);

}

根据该规则，<a>中的所有<li>变为白色。你需要做的是只让直接的孩子变白：

div ul.menu li:hover > a{

        background-color: rgb(73,144,241);

        background-color: rgba(73,144,241,0.05);

        color: rgb(255,255,255);

}

JSFiddle Demo