直接改.dropdown-item:hover背景色没反应是因为bootstrap 5+使用--bs-dropdown-link-hover-bg变量控制，硬写background-color会被变量覆盖；应优先覆盖该变量，同步设置:focus和:active状态，并确保css在bootstrap之后加载。
直接改 .dropdown-item:hover 背景色为什么没反应
不是 CSS 没加载，而是 Bootstrap 5+ 默认用 CSS 变量 --bs-dropdown-link-hover-bg 控制悬停背景，硬写 .dropdown-item:hover { background-color: #007bff; } 会被变量值覆盖。你在开发者工具里看到样式被划掉，大概率是这个原因。
推荐做法：优先覆盖 CSS 变量而非选择器
改变量更稳，还能自动适配深色模式和后续版本更新：
-
:root全局改（影响所有下拉菜单）：:root { --bs-dropdown-link-hover-bg: #007bff; } - 局部改（比如只改导航栏里的下拉）：
.navbar .dropdown-menu { --bs-dropdown-link-hover-bg: #007bff; } - 必须确保你的 CSS 在 Bootstrap 的 CSS 之后加载，否则变量不会生效
- 如果用了
.dropdown-menu-dark，它会重设变量，得额外加一层：.dropdown-menu-dark { --bs-dropdown-link-hover-bg: #343a40; }
别漏掉 :focus 和 :active 状态
只改 :hover 会导致鼠标、键盘、点击三种交互反馈不一致：
-
.dropdown-item:focus必须同步设背景色，否则 Tab 导航时视觉断裂 -
.dropdown-item:active和.dropdown-item:focus要写在同一规则里，否则点击后颜色一闪就恢复（:focus覆盖:active） - 禁用 focus outline 时，
outline: none不够，还得加box-shadow: none，否则默认蓝色焦点环还在
移动端真机测试不能省
Android Chrome 常把点击映射为 :focus，iOS 可能延迟触发，只靠 :hover 样式在真机上根本不可见。验证方法：
- 在 Android 真机上点开下拉菜单，观察点击项是否立刻高亮
- 用 Safari 开发者工具模拟 iOS 触摸事件，检查
:focus是否及时生效 - 如果高亮滞后或不出现，说明你只依赖
:hover，没处理:focus或:active
:focus 状态的同步——很多人调完鼠标悬停就以为完了，结果键盘用户按 Tab 时背景还是默认色。
