CSS Rollover Button Issue

Question

I'm trying to make the white "Contact US" text remain active or white, while the user rolls over the button and then hovers down to the list of links. I feel like I'm just circling a very simple answer. You'll notice it turns from red to white and then back to red when you rollover the dropdown menu. How do I keep it white when you rollover the menu below it?

I'm still in the process of cleaning up the code and adjusting the button, but I stripped out all the unnecessary bits.

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----> 

Answer 1

You have hover on both .new-contact-us-box and .new-contact-us . So you can change this:

.new-contact-us:hover {
  background-color: #ce1818;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}

to this:

.new-contact-us-box:hover .new-contact-us {
  background-color: #ce1818;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}

See 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; /*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----> 

Answer 2

Change your CSS

.new-contact-us:hover {
    background-color:#ce1818;
    font-family:Arial;
    font-size:14px;
    font-weight:bold;
    color: #ffffff;
}

to this:

.dropdown:hover .new-contact-us {
    background-color:#ce1818;
    font-family:Arial;
    font-size:14px;
    font-weight:bold;
    color: #ffffff;
}