如何更改右鍵點擊下拉菜單的背景顏色？

我不明白爲什麼我的下拉菜單鏈接在打開時會改變顏色，並右鍵單擊菜單。如何更改右鍵點擊下拉菜單的背景顏色？

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

如何更改右鍵點擊下拉菜單的背景顏色？

回答

相關問題