如何更改Bootstrap下拉菜单的背景颜色？

Question

目前我正在使用这个模板： http://getbootstrap.com/examples/navbar-fixed-top/

有没有办法给下拉菜单（当导航栏折叠时弹出的那个）设置一个与导航栏本身不同的背景颜色？

我尝试过以下方法，但没有成功：

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

- user3645310

Answer 1

使用这个

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

- Dragonfly

---

对我来说完美运行。 - Pabi

运行得非常好！ - Santiago Carmona González

直截了当，简单明了！感谢分享。 - Ajay Kumar

请使用“箭头”（“.navbar-nav> li> .dropdown-menu”）解释此符号...这是Bootstrap 4独有的还是CSS3...？提前感谢您。 - Pangit

Answer 2

记住，你所做的一切与CSS有关的内容只是在调用HTML已经读取的内容。你需要告诉CSS你想要哪些变化以及从哪里开始。下面的代码应该能够改变下拉菜单的背景颜色和字体颜色。

/* Dropdown menu background color*/

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

/* Dropdown menu font color*/ 

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

- Jonathan Odle

Answer 3

想要获取Bootstrap导航菜单下拉框的背景颜色

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

- Akanksha

Answer 4

试试这个

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

- Gurvir

Answer 5

你可以使用适当的@media屏幕值

使用以下代码更改父级ul背景：

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

- imdhemy

Answer 6

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

- Andrew Matthew

---

很不幸，当我使用这个时什么也没有发生。 - user3645310

Answer 7

当下拉菜单被点击时，Bootstrap 会添加一个 "open" 类，因此您可以按照以下方式进行覆盖：

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

- imhsgoraya

Answer 8

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

- wildnano