如何让Bootstrap 5下拉菜单激活项背景更醒目（仿Windows风格）

要实现类似Windows桌面应用菜单的深色激活项效果，只需自定义CSS覆盖Bootstrap 5下拉菜单项的hover和focus状态样式即可，具体操作如下：

1. 编写自定义CSS规则，针对下拉菜单项的激活状态设置背景色与文字颜色：

/* 自定义下拉菜单激活状态样式 */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: #0056b3; /* 深蓝色，可按需调整色调 */
  color: #ffffff; /* 白色文字提升对比度 */
}

2. 将这段CSS放在Bootstrap样式文件之后引入，确保优先级足够覆盖默认样式。

完整示例代码如下：

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>

<style>
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: #0056b3;
  color: #ffffff;
}
</style>

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Action
      </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#"><u>A</u>ction</a></li>
    <li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li>
    <li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li><a class="dropdown-item" href="#">S<u>e</u>parated link</a></li>
  </ul>
</div>

若需要调整颜色深度，直接修改background-color的色值即可，比如使用更深的#003d82来匹配Windows菜单的视觉风格。

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