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

Posted 2023-03-06

【中文标题】Bootstrap：更改背景颜色下拉菜单

【英文标题】：Bootstrap: Change Background Color Dropdown menu

【发布时间】：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;

【参考方案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;*/