直接覆盖 .dropdown-menu 样式即可修改背景色和字体颜色，推荐全局改CSS变量（如 --bs-dropdown-bg）或局部加自定义类；需同步覆盖悬停/焦点状态，并确保CSS引入顺序在Bootstrap之后。
修改 .dropdown-menu 的背景色和字体颜色
直接覆盖 bootstrap 默认的 .dropdown-menu 类样式即可，但要注意 css 优先级和作用域。bootstrap 5+ 使用 css 变量（如 --bs-dropdown-bg）控制主题色，改法分两种：全局统一改，或局部单独改。
- 全局改：在
:root或body下重设 CSS 变量，比如--bs-dropdown-bg: #2c3e50;、--bs-dropdown-color: #ecf0f1; - 局部改：给特定下拉菜单加自定义类（如
my-dropdown），再写.my-dropdown .dropdown-menu规则，避免污染其他下拉菜单 - 别漏掉悬停/焦点状态：
.dropdown-item:hover、.dropdown-item:focus默认会用--bs-dropdown-link-hover-bg等变量，也要一并覆盖
为什么加 !important 有时才生效
因为 Bootstrap 的 CSS 是从 node_modules 加载的，构建后通常打包进 style.css，顺序靠前；你写的自定义样式如果在它前面引入，就会被覆盖。不是必须用 !important，而是引入顺序或选择器权重不够。
- 推荐做法：确保你的 CSS 文件在 Bootstrap CSS 之后加载（检查 HTML 中
<link>顺序） - 或者提高选择器权重，比如用
.navbar .dropdown-menu替代单纯.dropdown-menu -
!important是临时解法，容易埋坑——比如后续想用 JS 动态切换主题时，内联样式或 JS 设置的颜色会被它锁死
dropdown-menu-dark 不起作用？检查版本和依赖
dropdown-menu-dark 是 Bootstrap 5.1+ 新增的类，用于快速启用深色下拉菜单。如果你加了没反应，大概率是版本低于 5.1，或没引入对应的 Sass 变量支持。
- 确认版本：
console.log(bootstrap)或查package.json里bootstrap版本号 - 该类依赖预编译时启用了
$enable-dark-mode（Sass 变量），若你用的是 CDN 或已编译 CSS，需确保用的是完整版（非bootstrap.min.css精简版） - 替代方案：不用这个类，直接写
.dropdown-menu-dark { --bs-dropdown-bg: #343a40; --bs-dropdown-color: #f8f9fa; }更可控
字体颜色在子菜单（.dropdown-submenu）里失效
Bootstrap 官方不提供 .dropdown-submenu，这是第三方扩展（比如 Bootswatch 插件或自定义实现）。它的样式完全独立于原生 .dropdown-menu，CSS 规则不会自动继承。
- 必须单独写样式，例如：
.dropdown-submenu .dropdown-menu { background-color: #1a252f; color: #bdc3c7; } - 注意子菜单的定位依赖
position: absolute和父级position: relative，改颜色前先确保结构正确，否则可能看不见菜单 - 移动端（
max-width: 991.98px）下，子菜单常被隐藏或折叠，此时改颜色也无效——得先解决显示逻辑问题
