Both .new-contact-us-box and .new-contact-us have a hover effect applied. To simplify, you can update the CSS like this:
.new-contact-us-box:hover .new-contact-us {
background-color: #ce1818;
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
Check out the demo below:
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-box:hover .new-contact-us {
background-color: #ce1818;
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
.new-contact-us:active {
position: relative;
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;
}
.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---->