直接改 .dropdown-item:hover 的 background-color 无法生效，因被 Bootstrap 的 --bs-dropdown-link-hover-bg 变量或高权重选择器（如 .navbar-light .dropdown-menu .dropdown-item:hover）覆盖；必须同步处理 :focus、深色模式及 :visited，并推荐用 CSS 变量统一控制以保障视觉一致性。
直接改 .dropdown-item:hover 的 background-color 就能生效，但必须确保你的 CSS 在 Bootstrap 之后加载，且要同步处理 :focus 和深色模式下的表现，否则鼠标移入和键盘聚焦颜色不一致，用户会感觉菜单“反应错乱”。
为什么只写 .dropdown-item:hover 常常没反应
不是样式没加载，而是被 Bootstrap 的 CSS 变量或高权重规则盖掉了。Bootstrap 5+ 默认用 --bs-dropdown-link-hover-bg 控制悬停背景，硬写 background-color 会被变量值覆盖；另外像 .navbar-light .dropdown-menu .dropdown-item:hover 这类带父级限定的选择器权重更高，也会导致你的规则失效。
- 检查开发者工具里该样式是否被划掉——如果被划掉，大概率是权重不够或变量劫持
- 确认你改的是普通下拉菜单，而不是
.dropdown-menu-dark下的项，后者会重置所有 hover 变量 - 如果你项目用了 Sass 编译，且定义了
$dropdown-link-hover-bg，那它生成的 CSS 会优先于你手写的规则
推荐写法：用 CSS 变量统一控制（Bootstrap 5.2+）
比硬写选择器更稳，还能自动适配深色模式切换：
:root {
--bs-dropdown-link-hover-bg: #0d6efd;
}
@media (prefers-color-scheme: dark) {
:root {
--bs-dropdown-link-hover-bg: #343a40;
}
}注意：--bs-dropdown-link-hover-bg 只影响 .dropdown-item:hover 和 .dropdown-item:focus 的背景，不控制文字色——文字色由 --bs-dropdown-link-hover-color 单独控制，必须一并设。
局部修改时怎么避免污染全局
给特定导航栏加命名空间类（比如 my-main-nav），再用作用域变量或限定选择器：
.my-main-nav .dropdown-menu {
--bs-dropdown-link-hover-bg: #2c3e50;
}
/* 或者直接覆盖（加 !important 防覆盖） */
.my-main-nav .dropdown-item:hover {
background-color: #2c3e50 !important;
}- 不要只改
:hover，务必同步写.my-main-nav .dropdown-item:focus，否则键盘用户 Tab 进来时背景还是默认色 - 移动端没有 hover，但部分 Android/iOS 浏览器会模拟一次 hover 状态，不能把它当作唯一反馈依据
- 如果下拉项是
<a>标签，还要考虑:visited——已访问链接可能触发浏览器默认紫色背景，需显式重置
容易被忽略的兼容性细节
真机测试比 DevTools 模拟更重要。Android Chrome 常把点击映射为 :focus，iOS Safari 则可能延迟触发，导致 hover 和 focus 背景色切换不同步；另外，.dropdown-menu-dark 类会覆盖 :root 中的变量，若你同时用了它，得在该类下再设一遍变量：
.dropdown-menu-dark .dropdown-item:hover {
background-color: #495057 !important;
}最麻烦的其实是“视觉一致性”——:hover、:focus、:active、.active 四种状态的背景色稍有差异，用户就能感觉到菜单在“卡顿”或“不跟手”。别只调一个状态，它们得是一套配色。
