Change the Colour of Dropdown Menu when Clicked and When Hovering Over It

Question

My dropdown menu goes back to navbar-default colour when I click on it. And when I hover over the items in the dropdown menu, they go back to the navbar-default colour, as well.

Here's a picture of what I mean:

Here's 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's 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;
}

Try adding `!important` like `background-color: #00AEFE !important;` This should force that particular style to be most important. — Kraang Prime, Dec 30 '16 at 01:04
Possible duplicate of [Change navbar color in Twitter Bootstrap 3](http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3) — vanburen, Dec 30 '16 at 01:06
You haven't asked a question, or included enough CSS to troubleshoot any issues. If you're talking about the color you see while clicking an element (while the left click is held down), that's the `:active` pseudoclass. — Jon Uleis, Dec 30 '16 at 01:06

Jishnu V S · Answer 1 · 2016-12-30T01:54:48.657

simply do this with overwrite 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 the snippet is this what you need ? Run the snippet and change it to full screen mode 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>

Change the Colour of Dropdown Menu when Clicked and When Hovering Over It

1 Answers1