右クリックでドロップダウンメニューの背景色を変更する方法は？

Question

私はそれを開いてメニューを右クリックすると私のドロップダウンメニューのリンクが色が変わっているのを理解できません。

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/

任意のアイデア理由ですか？

Answer 1

代わりの

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

我々は使うべきではありません標準コーディングメートとして多くの場面で重要！。だから私はこのコードがより良い解決策になることを願っています。

Answer 2

クリックするとメニューのリンクが変わるのを確認できませんか？背景色の変更とリンクの色のみが＃23527cと同じです。 CSSの意図通り。

Answer 3

色を変更したくない場合は、単に.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; 
} 

Answer 4

あなたはこれらのCSSルールを持っているためです。その後、

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

、トップメニューの要素を、上のCSSルールに従ってbackground-colorを変更hoverとactive（右クリック）イベント。

色を消すには、CSSルールを削除してください。