Change the color of the drop-down menu when pressed and when hovering over it

Question

My drop-down menu reverts to the color navbar-default when I click on it. And when I hover over the items in the drop-down menu, they also return to the color navbar-default .

Here is an image of what I mean:

Here is my HTML:

  <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Internet<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Cable</a></li> <li><a href="#">DSl</a></li> <li><a href="#">Wireless</a></li> <li><a href="#">Business Cable</a></li> <li><a href="#">Business DSL</a></li> </ul> </li> <li><a href="#">Phone</a></li> <li><a href="#">Android TV</a></li> <li><a href="#">Shaw Direct</a></li> <li><a href="#">Careers</a></li> </ul> </div> 

And here is my CSS:

 .navbar-default { background-color: #00AEFE; } .navbar-default:visited { background-color: #00AEFE; } ul.dropdown-menu { background-color: #00AEFE; } ul.dropdown-menu:hover { background-color: #00AEFE; } 

Answer 1

just do it by overwriting the bootstrap class

 .nav .open > a, .nav .open > a:focus, .nav .open > a:hover { background-color: #00AEFE; } .nav > li > a:focus, .nav > li > a:hover { background-color: #00AEFE; } 

check with snippet is this what you need? Run the snippet and change it in full screen, then check

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <style> ul.dropdown-menu { background-color: #00AEFE; } ul.dropdown-menu:hover { background-color: #00AEFE; } .nav .open > a, .nav .open > a:focus, .nav .open > a:hover { background-color: #00AEFE; } .nav > li > a:focus, .nav > li > a:hover { background-color: #00AEFE; } </style> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Internet<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Cable</a></li> <li><a href="#">DSl</a></li> <li><a href="#">Wireless</a></li> <li><a href="#">Business Cable</a></li> <li><a href="#">Business DSL</a></li> </ul> </li> <li><a href="#">Phone</a></li> <li><a href="#">Android TV</a></li> <li><a href="#">Shaw Direct</a></li> <li><a href="#">Careers</a></li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>