我刚刚开始学习 HTML 和 CSS，并开始构建一个简单的网站来即时学习。
我正在尝试构建一个下拉菜单，当用户将鼠标悬停在链接上时打开该菜单（我的代码中为 dropbtn ）。我希望当下拉菜单打开时（当用户将鼠标悬停在按钮或任何下拉选项上时）按钮的背景颜色和文本颜色发生变化。作为参考，您可以查看http://www.cibc.ca。他们的导航栏是栗色/红色，但是一旦用户将鼠标悬停在按钮上，按钮颜色就会切换为灰色（以匹配下拉菜单），并且文本颜色会更改为栗色。当用户向下移动到下拉选项时，颜色保持不变，并且只有在光标完全移出下拉菜单后才会恢复回来。
到目前为止，我已经成功创建了菜单，当用户将鼠标悬停在按钮上时，菜单会打开，按钮的背景颜色和文本颜色也会发生变化。但是，当用户将光标从按钮移到下拉选项之一时，按钮文本的颜色将恢复为原始的鬼白色，因此无法看到文本。我正在寻找方法来保持颜色变化，直到下拉菜单关闭。
这是我在 stackoverflow 上的第一篇文章，所以如果这篇文章有任何问题，请原谅我。
编辑：添加我在另一个问题上偶然发现的这行代码是有效的。不幸的是，我不知道它为什么起作用，所以我们将不胜感激。
#nav li:hover > a, #nav li:hover > a:link, #nav li:hover > a:visited{color:white;}
HTML：
<div>
<ul id = "menu">
<li><a class = "active" style = "color:dodgerblue" href = "http://www.google.ca">Home</a></li>
<li><a href = "website1.html">Projects</a></li>
<li><a href = "http://www.twitter.com">Community Involvement</a></li>
<li class = "dropdown">
<a class = "dropbtn" href = "#">Social Media</a>
<div class = "dropdown-content">
<a href = "http://www.facebook.com">Facebook</a>
<a href = "http://www.twitter.com">Twitter</a>
<a href = "http://www.instagram.com">Instagram</a></div>
</li> …