Bootstrap导航栏下拉菜单的锚点链接与选项文本颜色无法修改如何解决

问题核心原因 #

• 你自定义CSS里写的下拉菜单选择器是.nav-menu .drop-down，但HTML中使用的是Bootstrap 5原生的.dropdown类，类名不匹配导致自定义样式完全没有命中对应元素
• Account下拉触发按钮上自带了Bootstrap的text-muted类，优先级高于你自定义的.nav-menu a颜色规则，导致设置的白色不生效
• 若自定义CSS放置顺序早于Bootstrap CSS，也会被Bootstrap默认样式覆盖
• 你原来的CSS是基于hover触发下拉的逻辑，和Bootstrap 5默认的点击触发下拉逻辑不兼容，也会导致样式交互异常

修复方案 #

1. 调整CSS引入顺序 #

确保自定义CSS放在Bootstrap CSS的下方，保证自定义样式优先级更高

<!-- 先引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 再引入你自己的自定义CSS文件/样式 -->
<style>
/* 你的自定义样式放在这里 */
</style>

2. 替换适配Bootstrap5的样式 #

把原有CSS中所有的.drop-down替换为.dropdown，同时补充如下样式覆盖默认规则：

/* 修复下拉触发按钮颜色，覆盖text-muted的灰色 */
.nav-menu .dropdown > a.nav-link {
  color: #fff !important;
}
.nav-menu .dropdown > a.nav-link:hover {
  color: #4e4039 !important;
}

/* 修复hover触发下拉的交互逻辑 */
.nav-menu .dropdown .dropdown-menu {
  transition: ease all 0.3s;
  opacity: 0;
  visibility: hidden;
  display: block;
  top: calc(100% - 30px);
}
.nav-menu .dropdown:hover > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  top: 100%;
}

/* 修复下拉展开后选项的颜色 */
.nav-menu .dropdown .dropdown-menu a {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  color: #3c1300; /* 自定义默认选项颜色 */
}
.nav-menu .dropdown .dropdown-menu a:hover {
  color: #990000; /* 自定义hover选项颜色 */
  background-color: transparent; /* 可选：去掉Bootstrap默认的hover背景色 */
}

3. 可选优化 #

如果不需要text-muted的效果，直接把Account触发按钮a标签里的text-muted类删除，就可以去掉样式里的!important声明，优先级逻辑更合理。

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