Thyrst' Thyrst' - 18 days ago 5
CSS Question

How to change background color of dropdown menu on right click?

I can't figure out why is my dropdown menu link changing color when I open it and right click on the menu.

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 is here: https://jsfiddle.net/0nLvnhuu/

Any ideas why is that?

Answer

Instead of

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

Use this one:

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

As a standard coding formate we should not use !important in many occasions. So I hope this code would be a better solution.