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

我不明白为什么我的下拉菜单链接在打开时会改变颜色，并右键单击菜单。如何更改右键点击下拉菜单的背景颜色？

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/

任何想法，为什么会这样？

来源

2016-11-20 Thyrst'

你能否描述一下你的问题更多 – Chris

而不是

.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; 
}

作为一个标准的编码甲，我们不应该使用在许多重要的场合！所以我希望这个代码是一个更好的解决方案。

来源

2016-11-20 18:24:06

点击时看不到菜单链接改变颜色？只有背景颜色更改和链接颜色保持不变＃23527c。正如CSS中的意图。

来源

2016-11-20 18:12:09 Quutti

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

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

然后，顶部菜单元素，改变了background-color：

所以只要与取代它：

a { 
    background-color: #DDDDFF; 
} 

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

来源

2016-11-20 18:20:06

如果你没有一套完整的工作代码，请不要使用代码片段。使用编辑器代码格式来设置简单代码的格式。 –

这是因为你有这些CSS规则hover和active（右键单击）事件。

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

来源

2016-11-20 18:21:06

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

回答

相关问题