直接改.dropdown-item:hover背景色需用rgba值并加!important，同时覆盖:focus以保障键盘可访问性；二级菜单需单独设置嵌套选择器，移动端须用@media(hover:none)或js处理触摸残留。
Dropdown菜单项悬停背景色怎么改
直接改 .dropdown-item:hover 的 background-color 就行，但别只设颜色值——Bootstrap 5 默认用 rgba(0, 0, 0, 0.05)，你换成纯色或透明度不同的 rgba 值才有效。用 transparent 会失效，因为 Bootstrap 的 hover 样式带 !important 权重，且依赖 opacity 参与过渡动画。
- 推荐写法：
.dropdown-item:hover { background-color: rgba(255, 255, 255, 0.1) !important; } - 深色导航栏下建议用浅灰：
rgba(255, 255, 255, 0.08)，避免反光刺眼 - 如果用了 backdrop-filter 毛玻璃效果，hover 状态也要同步加：
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); - 别漏掉 focus 状态：
.dropdown-item:focus { background-color: rgba(0, 0, 0, 0.1) !important; }，否则键盘用户看不到焦点反馈
为什么 .dropdown-item:hover { opacity: 0.8 } 不起作用
Opacity 会把文字、图标、边框一起变淡，不是“背景透明”，而是整个元素降级。而且 Bootstrap 的 hover 动画靠 background-color 的 rgba 变化驱动，opacity 会打断 transition 效果，导致悬停时闪一下或无动画。
- 浏览器开发者工具里能看到
opacity声明被划掉，真正生效的是background-color: rgba(...) - 移动端触摸时没有 hover 状态，但 focus 仍存在，所以只改 hover 不够，必须连带处理 focus 和 active
- 如果你硬要用 opacity，请同时覆盖
.dropdown-item:hover::before伪元素（某些定制主题会加），否则视觉不一致
二级菜单里的悬停透明度要单独处理吗
要。二级菜单（即 .dropdown-menu .dropdown-menu）的悬停样式不会继承一级的设置，CSS 选择器权重也不一样。尤其当父级菜单用了半透明白底，二级菜单 hover 背景若没调低透明度，会显得太实、层次不清。
- 必须显式写：
.dropdown-menu .dropdown-menu .dropdown-item:hover { background-color: rgba(255, 255, 255, 0.05) !important; } - 注意选择器嵌套层级：二级菜单是
.dropdown-menu里的.dropdown-menu，不是.dropdown-submenu .dropdown-menu - 如果用了自定义 class 如
.dropdown-hover，记得在 hover 规则里带上它：.dropdown-hover .dropdown-menu .dropdown-item:hover - 滚动时二级菜单位置固定，但背景透明度不能随 navbar 变化——CSS 无法监听 scroll，得靠 JS 切换 class 控制，这点容易漏
移动端点击后悬停态残留怎么办
Android 和部分 iOS 设备在点击后会短暂保留 :hover 状态，导致菜单项背景色卡住不退。这不是 bug，是 touchend 后浏览器模拟了一次 mouseover。
- 加媒体查询兜底：
@media (hover: none) { .dropdown-item:hover { background-color: transparent !important; } } - 更稳妥的做法是监听
touchstart，给 body 加临时 class：document.body.classList.add('is-touching')，再用.is-touching .dropdown-item:hover覆盖为透明 - 别依赖
:active替代 —— 它只在手指按下的瞬间触发，松开就没了，用户根本看不到反馈 - 测试时真机比模拟器准，Chrome DevTools 的 device mode 有时会误判 hover 支持状态
