Bootstrap3 Pills下拉子菜单li项能否通过CSS修改悬停背景色？

当然可以！Bootstrap 3的下拉菜单默认样式完全支持通过自定义CSS来覆盖，只要注意选择器的优先级，就能轻松实现你想要的效果。

先看你的原始下拉菜单代码：

<li class="dropdown"> 
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a> 
  <ul class="dropdown-menu"> 
    <li><a href="#">Submenu 1-1</a></li> 
    <li><a href="#">Submenu 1-2</a></li> 
    <li><a href="#">Submenu 1-3</a></li> 
  </ul> 
</li>

两种常见的修改方式： #

• 方式一：修改<a>标签的悬停背景（Bootstrap默认触发元素）
  Bootstrap默认是给下拉菜单里的<a>标签设置悬停样式的，所以最直接的方式是针对这个元素写:hover规则：

/* 自定义下拉菜单项的悬停背景色 */
.dropdown-menu > li > a:hover {
    background-color: #ff8c00; /* 替换成你需要的颜色值 */
    background-image: none; /* 移除Bootstrap默认的渐变背景效果 */
    color: #ffffff; /* 可选：调整文字颜色，提升可读性 */
}

• 方式二：直接给<li>标签设置悬停背景
  如果你想让整个<li>容器都有悬停背景（而不仅仅是里面的链接），可以这样写：

/* 给<li>项添加悬停背景 */
.dropdown-menu > li:hover {
    background-color: #e6f7ff;
}
/* 同步调整链接文字颜色，避免视觉冲突 */
.dropdown-menu > li:hover > a {
    color: #1890ff;
}

注意事项： #

确保你的自定义CSS代码是在Bootstrap的CSS文件之后引入的，这样你的样式才能覆盖默认规则。如果还是不生效，可以适当提高选择器的特异性（比如加上父元素的类名，比如.navbar .dropdown-menu > li > a:hover），尽量避免滥用!important，除非万不得已。

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