如何在CSS中修改Bootstrap下拉菜单的背景色与文字颜色？

问题根源 #

你的代码存在两个核心问题：

• 选择器错误：.dropdown-item a:hover 无效，因为 .dropdown-item 本身就是 <a> 标签，不存在嵌套的a元素，这个选择器匹配不到任何内容。
• 样式不完整：只设置了下拉菜单的背景色，没定义下拉选项的默认文字颜色、hover状态的文字颜色，导致对比度不足。

另外注意：你引入的是Bootstrap 4，但下拉触发器用了Bootstrap 5的data-bs-toggle属性，应该改为data-toggle，否则下拉功能可能无法正常触发。

修正后的CSS #

/* 下拉菜单容器 */
.dropdown-menu {
  background-color: #636161 !important; /* 自定义菜单背景色 */
}

/* 下拉选项默认样式 */
.dropdown-item {
  color: #fff !important; /* 设置选项默认文字颜色，保证和背景对比度 */
}

/* 下拉选项hover/聚焦状态 */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #000 !important; /* hover时背景色 */
  color: #fff !important; /* hover时文字颜色 */
}

HTML修正点 #

将下拉触发器的属性修改为Bootstrap 4兼容的版本：

<a href="#" class="nav-link dropdown-toggle" id="dropdownNav" data-toggle="dropdown">database</a>

优化建议 #

如果想减少!important的使用，可以通过增加选择器权重实现，比如：

.navbar-nav .dropdown-menu {
  background-color: #636161;
}

.navbar-nav .dropdown-item {
  color: #fff;
}

.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
  background-color: #000;
  color: #fff;
}

内容的提问来源于stack exchange，提问作者Paul Godard