Bootstrap：更改背景颜色下拉菜单答案

【问题标题】：Bootstrap: Change Background Color Dropdown menuBootstrap：更改背景颜色下拉菜单
【发布时间】：2014-07-05 04:07:30
【问题描述】：

目前我正在使用这个模板： 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;
}

【问题讨论】：

标签： css twitter-bootstrap drop-down-menu background-color

【解决方案1】：

使用这个

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

【讨论】：

非常适合我。
像魅力一样工作！
直截了当。简单明快。！感谢分享。
请使用“箭头”（“.navbar-nav > li > .dropdown-menu”）解释这个符号...这是 Bootstrap 4 独有的东西还是 CSS3...？提前谢谢你。

【解决方案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;  }

【讨论】：

【解决方案3】：

获取引导导航菜单下拉菜单的背景颜色

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

【讨论】：

【解决方案4】：

试试这个

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

【讨论】：

【解决方案5】：

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

【讨论】：

不幸的是，当我使用它时没有任何反应

【解决方案6】：

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

【讨论】：

【解决方案7】：

单击下拉菜单时，引导程序添加了一个“打开”类，因此您可以覆盖如下：

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

【讨论】：

【解决方案8】：

您可以使用合适的@media screen 值

要更改父 ul 背景，请使用以下代码：

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

【讨论】：