修改.dropdown-item悬停文字颜色应优先覆盖CSS变量--bs-dropdown-link-hover-color，而非直接写color；需确保CSS在Bootstrap之后加载，并同步设置:focus色及适配深色模式。
修改 .dropdown-item 悬停文字颜色的关键是覆盖正确的选择器
直接写 .dropdown-item:hover { color: #fff; } 往往无效——因为 bootstrap 5+ 使用 css 变量（如 --bs-dropdown-link-hover-color）控制悬停文字色，硬写 color 会被变量值覆盖。你看到没变色，不是 css 没生效，而是被变量劫持了。
推荐做法：优先改 CSS 变量，而非直接覆盖 color
全局统一改（最省心）：
在 :root 或 body 中重设变量：
:root {
--bs-dropdown-link-hover-color: #ffffff;
--bs-dropdown-link-hover-bg: #007bff;
}
局部单独改（避免污染其他下拉菜单）：
给特定下拉菜单加自定义类（如 my-nav-dropdown），再用作用域变量：
.my-nav-dropdown .dropdown-menu {
--bs-dropdown-link-hover-color: #2c3e50;
--bs-dropdown-link-hover-bg: #ecf0f1;
}
- 必须确保你的 CSS 文件在 Bootstrap 的 CSS 之后加载，否则变量不会被覆盖
- 不要漏掉焦点状态：
--bs-dropdown-link-focus-color和--bs-dropdown-link-focus-bg也要同步设，否则键盘用户 tab 进去时颜色不一致 - 如果用了
dropdown-menu-dark，它本身会重置这些变量，你的:root设置会被它覆盖，此时得在.dropdown-menu-dark下再设一遍
为什么 !important 有时才管用？
不是变量本身需要 !important，而是你写的 .dropdown-item:hover { color: red !important; } 强行绕过了变量机制。这种写法短期能“修好”，但会带来两个实际问题：
- 后续升级 Bootstrap 时，若它新增了
hover下的其他样式（比如过渡动画、阴影），你的!important会锁死所有继承，导致新特性失效 - 如果项目里启用了深色主题切换，JS 动态改
:root变量就完全不起作用了，因为!important写死的内联或样式表规则优先级更高 - 移动端 touch 设备没有 hover，这类样式根本不会触发，但
!important仍占着解析资源
检查是否生效的最快方式
打开浏览器开发者工具（F12），选中一个 .dropdown-item 元素，在 Styles 面板里搜索 --bs-dropdown-link-hover-color：
- 如果看到该变量值是你设的，说明变量覆盖成功
- 如果看到的是 Bootstrap 默认值（如
#212529），检查 CSS 加载顺序或选择器作用域是否写错 - 如果变量没出现，说明你写的规则压根没匹配上——常见原因是忘了加
.dropdown-menu父容器限定，写了.my-dropdown .dropdown-item:hover却没包住整个菜单结构
真正容易被忽略的，是焦点态和深色模式下的双重适配。很多人只测鼠标悬停，一到键盘导航或夜间模式就露馅。
