如何更改右键点击下拉菜单的背景颜色?
问题描述:
我不明白为什么我的下拉菜单链接在打开时会改变颜色,并右键单击菜单。如何更改右键点击下拉菜单的背景颜色?
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/
任何想法,为什么会这样?
答
而不是
.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;
}
作为一个标准的编码甲,我们不应该使用在许多重要的场合!所以我希望这个代码是一个更好的解决方案。
答
点击时看不到菜单链接改变颜色?只有背景颜色更改和链接颜色保持不变#23527c。正如CSS中的意图。
答
如果你不想改变颜色,只需删除.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;
}
+0
如果你没有一套完整的工作代码,请不要使用代码片段。使用编辑器代码格式来设置简单代码的格式。 –
答
这是因为你有这些CSS规则hover
和active
(右键单击)事件。
要消除颜色,只需删除CSS规则。
你能否描述一下你的问题更多 – Chris