Question

当我打开它并右键单击菜单时，我无法弄清楚为什么我的下拉菜单链接会改变颜色。

HTML：

<ul class="nav nav-pills nav-stacked">
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      MyMenu <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li class="disabled"><a href="#">Blabla1</a></li>
      <li><a href="#">Blabla2</a></li>
      <li><a href="#">Blabla3</a></li>
    </ul>
  </li>
</ul>

CSS：

a {
  background-color: #DDDDFF;
}

.nav > li > a:hover,
.nav > li > a:focus,
.nav > li > a:active {
  background-color: #6666FF !important;
}

JSFiddle在这里：https://jsfiddle.net/0nLvnhuu/

任何想法为什么会这样？

Answer 1

如果您不想更改颜色，只需删除.nav > li > a:active即可。当您将鼠标悬停在项目上时，由于.nav > li > a:hover，颜色会发生变化。我认为a:focus不会影响您的示例。但在您的情况下，只需删除.nav > li > a:active和a:focus，然后您的问题就会得到解决。

所以只需将其替换为：

a {
  background-color: #DDDDFF;
}

.nav > li > a:hover {
  background-color: #6666FF !important;
}

Answer 2

而不是

.nav > li > a:hover,
.nav > li > a:focus,
.nav > li > a:active {
    background-color: #6666FF !important;
}

使用这个：

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover{
    background-color: #6666FF;
}

作为标准编码格式，我们不应该在很多场合使用！important。所以我希望这段代码能够成为更好的解决方案。

Answer 3

我无法看到您的菜单链接在点击时更改颜色？只有背景颜色变化和链接颜色保持不变＃23527c。正如CSS中所预期的那样。

Answer 4

这是因为你有这些CSS规则：

.nav > li > a:hover,
.nav > li > a:focus,
.nav > li > a:active {
  background-color: #6666FF !important;
}

然后，顶部菜单是一个元素，根据background-color上的CSS规则和hover（右键单击）事件更改active。

要删除颜色，只需删除CSS规则。

右键单击如何更改下拉菜单的背景颜色？

4 个答案: