-1
我試圖讓白色的「聯繫我們」文本保持活動或白色，而用戶滾過按鈕，然後向下移動到鏈接列表。我覺得我只是在回答一個非常簡單的問題。您會注意到，當您翻轉下拉菜單時，它會從紅色變成白色，然後變回紅色。當您翻轉下面的菜單時，我該如何保持它白色？CSS翻轉按鈕問題
我仍然在清理代碼和調整按鈕，但我剔除了所有不必要的位。
的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---->
我知道這是簡單的東西，我真不敢在長時間觀察代碼的深淵之後再看看它。謝謝！ – jaycss88