直接改.dropdown-menu的background-color最快见效，但须先确认是dropdown模式（data-bs-toggle="dropdown"）；若为collapse模式则应改.navbar-collapse.show，否则无效。
直接改 .dropdown-menu 的 background-color 最快见效，但必须确认你用的是 dropdown 模式（data-bs-toggle="dropdown"），否则改错地方完全没反应。
先确认是 dropdown 模式还是 collapse 模式
打开浏览器开发者工具，点开汉堡菜单或悬停触发二级菜单，看 DOM 中实际展开的容器：
- 如果看到
.dropdown-menu元素直接挂载在.navbar下（常见于桌面端悬停菜单），说明是 dropdown 模式 → 改.dropdown-menu - 如果看到
.navbar-collapse.show包着.navbar-nav，且里面没有.dropdown-menu，说明是 collapse 模式 → 改.navbar-collapse.show，不是二级菜单背景，而是整个折叠面板背景 - Bootstrap 5 默认对移动端折叠使用 collapse 模式；桌面端导航项带下拉箭头的，才走 dropdown 模式
改 .dropdown-menu 背景色的三种写法
优先级从高到低排列，按需选择：
-
最直白：覆盖类样式 +
!important—— 适合快速验证或局部调整.dropdown-menu { background-color: #2c3e50 !important; }
必须确保你的 CSS 文件在bootstrap.min.css之后加载，否则被变量覆盖 -
更干净：CSS 变量全局控制 —— Bootstrap 5.3+ 支持：
:root { --bs-dropdown-bg: #2c3e50; }
同时建议同步设--bs-dropdown-color和--bs-dropdown-link-hover-bg，避免文字不可读或悬停反色异常 -
最精准：限定父级范围 —— 避免影响按钮下拉等其他组件：
.navbar .dropdown-menu { background-color: #2c3e50; }
不加!important也能生效，前提是没更高权重规则（如.navbar-light .dropdown-menu）干扰
为什么加了样式却还是白色？三个高频失效点
90% 的“改了没反应”都卡在这三处：
- 自定义
<style>或 CSS 文件写在 Bootstrap 的<link rel="stylesheet">之前，被默认样式盖掉了 - 实际 DOM 是
.navbar-collapse.show，你却去改.dropdown-menu—— 它根本没渲染出来 - 浏览器 DevTools 里看到
.dropdown-menu的background-color被划掉（text-decoration: line-through），说明有更高权重规则（比如.navbar-light .dropdown-menu）在起作用，得提高选择器权重或加!important
最隐蔽的问题是：深色背景配浅色文字时，.dropdown-item:hover 的默认背景色可能还是半透灰，导致悬停不明显。别只调一级背景，顺手检查 --bs-dropdown-link-hover-bg 和 --bs-dropdown-link-active-bg 是否也同步更新了。
