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

【问题标题】：How to change background color of dropdown menu on right click?如何在右键单击时更改下拉菜单的背景颜色？
【发布时间】：2017-04-04 02:24:38
【问题描述】：

我不明白为什么我的下拉菜单链接在打开并右键单击菜单时会变色。

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/

有什么想法吗？

【问题讨论】：

你能描述一下你的问题吗

标签： html css twitter-bootstrap drop-down-menu

【解决方案1】：

我看不到您的菜单链接在点击时会改变颜色？只有背景颜色发生变化，链接颜色保持不变#23527c。正如 CSS 中所预期的那样。

【讨论】：

【解决方案2】：

如果您不想改变颜色，只需删除.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;
}

【讨论】：

如果您没有一整套工作代码，请不要使用sn-ps。使用编辑器代码格式化来格式化简单代码。

【解决方案3】：

因为你有这些 CSS 规则：

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

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

要去掉颜色，只需删除 CSS 规则即可。

【讨论】：

【解决方案4】：

而不是

.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。所以我希望这段代码会是一个更好的解决方案。

【讨论】：