How can I change the background color of a Bootstrap dropdown?

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

Netsuke

Answer 1

Use this

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

Salinas

Works perfectly for me. – Eyestalk

Works like a charm! – Mudskipper

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. – Diez

Answer 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;  }

Individualist

Answer 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;}

Attending

Answer 4

Try this

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

Golgotha

Answer 5

you can use a suitable @media screen value

to change the parent ul background use the following code:

@media (max-width: 768px){
  .dropdown-menu{
    /*property: value;*/
  }
}

Trichocyst

Answer 6

ul.dropdown-menu {
    background-color: #000;
}

Edris

unfortunately nothing happens when i use this – Netsuke

Answer 7

.nav .open>a {background: #yourcolor !important;}

Judaica

Answer 8

When dropdown menu clicked then an "open" class has added by bootstrap so you can overwrite as following:

.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
    color: #555;
    background-color: #e7e7e7;
}    

Wage