Bootstrap: Change Background Color Dropdown menu

Question

At the moment i am using this template: http://getbootstrap.com/examples/navbar-fixed-top/

Is there any way to give the background in the dropdownmenu (The one that pops up, when the navbar collapses) another color than the navbar itself?

What i tried so far is this, without success:

.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555555;
    background-color: #e7e7e7;
}

Solution 1

Use this

.navbar-nav > li > .dropdown-menu { background-color: #FF0000; }

Solution 2

Remember all you are doing with CSS is calling out what your HTML already reads. You need to get a tell the CSS what changes you want and from where. This code below should work with changing the background color of your drop down menu and the color of the font.

/* Dropdown menu background color*/

.navbar-nav > li > .dropdown-menu {     background-color: #e7e7e7;  }

/* Dropdown menu font color*/ 

 .navbar-nav > li > .dropdown-menu a{   color: #555555;  }

Solution 3

To get the background color of Bootstrap Navigation Menu dropdowns

.navbar-nav > li > .dropdown-menu a:link,
.navbar-nav > li > .dropdown-menu a:hover { background-color: #FF0000;}

Solution 4

Try this

.dropdown-menu > .active > a,.dropdown-menu > .active > a:hover.dropdown-menu > .active > a:focus {color: #555555!important; background-color: #e7e7e7!important;}

View more solutions

Comments

[user3645310]

unfortunately nothing happens when i use this

[Pabi]

Works perfectly for me.

[Santiago Carmona González]

Works like a charm!

[Ajay Kumar]

Straight to the point. Simple and crisp.! Thanks for sharing.

[Pangit]

Please explain this notation using the 'arrows' (".navbar-nav > li > .dropdown-menu")...is this something unique to Bootstrap 4 or is this CSS3...? I thank you in advance.