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

Question

首先，我想补充一点，自从我用 CSS 开发下拉菜单以来，已经有一段时间了，大约 3 年。我有这个下拉菜单，但我有以下问题。显然我不能覆盖子菜单的 li/a 元素的属性。

我想使子菜单的 li 的 a 元素的字体颜色与菜单的 ul 的 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>变白。你需要做的是只让直接 child 变白:

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