Wie ändere ich die Hintergrundfarbe des Dropdown-Menüs bei Rechtsklick?

Question

Ich kann nicht herausfinden, warum mein Dropdown-Menü die Farbe ändert, wenn ich sie öffne und mit der rechten Maustaste auf das Menü klicke.

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

Irgendwelche Ideen, warum das so ist?

Answer 1

Statt

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

verwenden ein:

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

Als Standard Codierung Format sollten wir nicht verwenden, wichtig bei vielen Gelegenheiten!. Ich hoffe also, dass dieser Code eine bessere Lösung wäre.

Answer 2

Ich kann nicht sehen, dass Ihre Menüverknüpfung die Farbe beim Klicken ändert? Nur Hintergrundfarbe ändert sich und Verbindungsfarbe bleibt die gleiche # 23527c. Wie in CSS beabsichtigt.

Answer 3

Wenn Sie die Farbe nicht ändern möchten, löschen Sie einfach die .nav > li > a:active. Die Farbe ändert sich, wenn Sie den Mauszeiger über das Element bewegen, weil .nav > li > a:hover. Ich denke, a:focus hat keinen Einfluss auf Ihr Beispiel. Aber in Ihrem Fall löschen Sie einfach .nav > li > a:active und a:focus und dann wird Ihr Problem gelöst werden.

So ersetzen Sie einfach mit, dass:

a { 
    background-color: #DDDDFF; 
} 

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

Answer 4

Es ist, weil Sie diese CSS-Regeln haben:

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

dann ein Element das Hauptmenü, ändert sich die background-color nach der CSS-Regel auf und active (Rechtsklick) Ereignisse.

Um die Farbe loszuwerden, entfernen Sie einfach die CSS-Regel.