直接改 .dropdown-menu 的 background-color 最快见效，需确保自定义 css 在 bootstrap 之后加载并加 !important；或全局设置 :root { --bs-dropdown-bg: #2c3e50; }，同时同步调整 --bs-dropdown-color 和 --bs-dropdown-link-hover-bg 等变量以保证整体协调。
直接改 .dropdown-menu 的 background-color 最快见效
Bootstrap 5 的下拉菜单（包括导航栏折叠后弹出的二级菜单）默认渲染为 .dropdown-menu 元素，它的背景色由 CSS 变量 --bs-dropdown-bg 控制。最直白的改法就是覆盖这个类：
- 确保你的自定义 CSS 在 Bootstrap 的
bootstrap.min.css之后 加载，否则会被覆盖 - 写法示例：
.dropdown-menu { background-color: #2c3e50 !important; } - 加
!important是因为 Bootstrap 5 默认用background-color: var(--bs-dropdown-bg)，变量本身权重高，不加容易失效 - 如果只改某一个导航栏的二级菜单（比如顶部导航），可以加父级限定：
.navbar .dropdown-menu { background-color: #2c3e50; }，避免影响其他下拉组件（如按钮下拉）
用 CSS 变量全局统一改更干净，但要注意生效范围
Bootstrap 5.3+ 支持根级变量 --bs-dropdown-bg，设一次就能管所有 .dropdown-menu：
- 推荐写法：
:root { --bs-dropdown-bg: #2c3e50; } - 这个变量只对
.dropdown-menu生效，不影响.navbar-collapse.show这类 collapse 模式下的折叠区域 - 如果你项目用了 Sass 编译，且已定义了
$dropdown-menu-bg，那它会覆盖 CSS 变量——优先检查你自己的_variables.scss是否已设该值 - 深色模式下需额外处理：
@media (prefers-color-scheme: dark) { :root { --bs-dropdown-bg: #1a202c; } }
为什么加了样式没反应？常见失效点就这三处
改完背景色却还是白色，大概率掉进下面这些坑里：
-
<style></style>或自定义 CSS 文件写在 Bootstrap 的<link rel="stylesheet">之前，被默认样式盖掉了 - 你实际用的是
data-bs-toggle="collapse"（非 dropdown 模式），此时二级菜单不在.dropdown-menu里，而是在.navbar-collapse.show内部——得改.navbar-collapse.show的背景 - 浏览器开发者工具里看到
.dropdown-menu被标记为text-decoration: line-through，说明有更高权重规则（比如.navbar-light .dropdown-menu）在起作用，得提高选择器权重或加!important
别忘了同步改字体色和 hover 状态
只改背景色，文字可能看不清，hover 效果也可能突兀：
- 字体颜色对应变量是
--bs-dropdown-color，可一并设置：:root { --bs-dropdown-bg: #2c3e50; --bs-dropdown-color: #ecf0f1; } - 悬停背景色由
--bs-dropdown-link-hover-bg控制，不改的话鼠标移上去还是浅灰：:root { --bs-dropdown-link-hover-bg: #34495e; } - 聚焦态（键盘用户 tab 进入）和激活态（
:active）也建议保持一致，否则可访问性出问题；禁用项要排除：.dropdown-item:not(.disabled):hover { background-color: #34495e; }
