【发布时间】：2016-10-23 07:13:37
【问题描述】：
我刚刚开始学习 HTML 和 CSS，并已开始构建一个简单的网站以随时学习。
我正在尝试构建一个下拉菜单，当用户将鼠标悬停在链接上时会打开（我的代码中的 dropbtn）。我希望在打开下拉菜单时（当用户将鼠标悬停在按钮或任何下拉选项上时）更改按钮的背景颜色和文本颜色。作为参考，您可以查看http://www.cibc.ca。他们的导航栏是栗色/红色，但是一旦用户将鼠标悬停在按钮上，按钮颜色就会变为灰色（以匹配下拉菜单）并且文本颜色会变为栗色。当用户向下移动到下拉选项时颜色保持不变，并且只有在光标完全移出下拉菜单时才会恢复。
到目前为止，我已经设法创建了菜单，当用户将鼠标悬停在按钮上时，它会打开并且按钮的背景颜色和文本颜色会发生变化。但是，当用户将光标从按钮上移到下拉选项之一上时，按钮文本的颜色会恢复为原始的ghostwhite，因此无法看到文本。我正在寻找在关闭下拉菜单之前保持颜色变化的方法。
这是我在 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>
<li><a href = "http://www.twitter.com">Join Our Team</a></li>
<li><a href = "http://www.twitter.com">FAQ</a></li>
<li><a href = "http://www.twitter.com">About Us</a></li>
<li><a href = "http://www.twitter.com">Contact Us</a></li>
</ul>
CSS：
ul#menu li.dropdown .dropbtn{
display:inline-block;
color:ghostwhite;
text-decoration:none;
text-align:center;
padding:14px 16px;
}
ul#menu li a:hover:not(.active), .dropdown:hover .dropbtn{
background-color:ghostwhite;
color:dodgerblue;
}
.active{
background-color:ivory;
}
ul#menu li.dropdown{
display:inline-block;
}
ul#menu .dropdown-content {
display: none;
position: absolute;
background-color: ghostwhite;
min-width: 160px;
}
ul#menu .dropdown-content a{
color:dodgerblue;
padding: 12px 16px;
text-decoration:none;
display:block;
text-align:left;
}
ul#menu .dropdown .dropdown-content a:hover{
background-color: skyblue;
}
ul#menu .dropdown:hover .dropdown-content {
display: block;
}
【问题讨论】：
-
你需要 javascript。
-
我编辑了我的帖子，并添加了一行代码，我在另一个答案中找到了我想要的。但是，我不知道它为什么会起作用，所以如果有人可以为我解释一下，会对我有很大帮助。
标签： html css drop-down-menu