Bootstrap导航栏下拉菜单折叠状态下悬停颜色失效如何解决？

这个问题我碰到过好几次，大概率是这几个原因导致的，给你一步步拆解解决方案：

1. 适配移动端触摸交互：补充:active/:focus伪类 #

手机端没有鼠标悬停的概念，用户的操作是触摸点击，只加:hover是覆盖不到这个场景的。另外很多框架（比如Bootstrap）在移动端折叠状态下，下拉菜单项可能会用专门的类，导致你的选择器优先级不够。

修改后的CSS可以这样写：

/* 同时覆盖桌面悬停、移动端点击、焦点状态 */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:active,
.dropdown-menu > li > a:focus {
    background-color: #85E6FF;
    background-image: none;
    /* 可选：去掉点击后默认的焦点边框，体验更统一 */
    outline: none;
}

/* 如果是Bootstrap 4+版本，直接用框架自带的.dropdown-item类更准确 */
.dropdown-item:hover,
.dropdown-item:active,
.dropdown-item:focus {
    background-color: #85E6FF;
    background-image: none;
}

2. 提高选择器优先级，覆盖框架默认样式 #

有时候折叠状态的下拉菜单（比如汉堡菜单展开的导航），父容器会有额外的类（比如.navbar-collapse），框架的默认样式优先级可能比你的自定义CSS高。这时候可以通过添加父类选择器来提升权重：

/* 针对折叠状态的下拉菜单，提高选择器优先级 */
.navbar-collapse .dropdown-menu > li > a:hover,
.navbar-collapse .dropdown-menu > li > a:active {
    background-color: #85E6FF;
    background-image: none;
}

要是还是不行，紧急情况下可以临时用!important强制覆盖（尽量少用，避免样式冲突）：

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:active {
    background-color: #85E6FF !important;
    background-image: none !important;
}

3. 排查是否有JS阻止触摸事件 #

个别情况下，页面里的JS脚本可能会阻止移动端的触摸事件冒泡，导致:active状态无法触发。你可以用浏览器的移动端调试工具，点击菜单后查看元素的状态，如果:active没被触发，就需要排查相关JS代码，确保没有阻止touchstart或click事件。

试试上面的方法，一般第一种就能解决大部分情况，核心就是适配移动端的触摸交互逻辑~

内容的提问来源于stack exchange，提问作者Joey_D