【发布时间】：2017-09-22 15:25:20
【问题描述】：
我正在尝试使白色的“联系我们”文本保持活动状态或白色，同时用户将鼠标悬停在按钮上，然后将鼠标悬停在链接列表中。我觉得我只是在圈出一个非常简单的答案。当您滚动下拉菜单时，您会注意到它从红色变为白色，然后又变回红色。滚动下方的菜单时如何使其保持白色？
我还在清理代码和调整按钮的过程中，但我去掉了所有不必要的部分。
JSFiddle：https://jsfiddle.net/hvj675mo/6/
<style>body {
background-color: #000000;
}
.new-contact-us {
background-color: transparent;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
border: 2px solid #ce1818;
display: inline-block;
cursor: pointer;
font-family: Arial;
font-size: 14px;
font-weight: bold;
padding: 14px 14px;
text-decoration: none;
line-height: 10px;
color: #ce1818;
}
.new-contact-us:hover {
background-color: #ce1818;
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
.new-contact-us:active {
position: relative;
/*top:1px;*/
color: #ffffff;
background-color: #ce1818;
}
/**** START BOX DIV ****/
.new-contact-us-box {
position: relative;
display: block;
}
.new-contact-us-box:active {
color: #ffffff;
}
/**** START DROPDOWN ****/
.new-contact-us-box ul li {
padding-bottom: 10px;
font-size: 16px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ababaa;
text-transform: none;
}
.new-contact-us-box ul li a {
color: #ce1818;
text-decoration: none;
}
.new-contact-us-box ul li a:hover {
text-decoration: underline;
}
.new-contact-us-box ul li a:active {
text-decoration: underline;
}
.container-contact {
float: left;
width: 296px;
margin 0px;
}
.new-contact-us-box ul {
padding-left: 0px;
list-style: none;
margin: 0px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown:hover {
position: relative;
display: inline-block;
background-color: #ce1818;
color: #ffffff;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
left: auto !important;
right: 0 !important;
}
</style><div style="width: 700px; padding-left: 600px">
<!-----WILL REMOVE THIS DIV AFTER. HERE FOR TESTING---->
<div class="new-contact-us-box dropdown">
<a href="#" class="new-contact-us">CONTACT US</a>
<div class="dropdown-content">
<ul style="width: 296px; left: auto !important; right: 0 !important; padding: 20px;">
<li>
<div class="container-contact">
<ul>
<li>Hello</li>
<li><img src="####" style="margin-right: 10px;"><a href="#" target="_blank">#########</a></li>
<li style="margin-left: 28px; margin-top: -9px"> <a href="#" target="_blank">BlAH BLAH</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-----WILL REMOVE THIS DIV AFTER. HERE FOR TESTING---->【问题讨论】：
标签： html css button drop-down-menu hover