使用bootstrap下拉菜单，怎么修改菜单背景色和选

Posted 2023-05-12

实际上比较简单，只需要加一个css设置下hover的状态，把下拉菜单设置成block，具体css： .nav > li:hover .dropdown-menu display: block; 这句css加在bootstrap.min.css之后出现的css中，你试下！ 参考技术A 因为Bootstrap的下拉菜单（Dropdowns）就是在点击按钮时给.dropdown的div加上了open的类，要改点击后的背景色，js当然可以，最直接可以加css

.open>.btnbackground-color:#000!important;本回答被提问者采纳 参考技术B 在你自己的css文件里重定义样式 进行覆盖 不管用加 ！impotrant

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

【中文标题】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;*/