CSS子菜單懸停顏色問題

Question

我在WordPress的一個子菜單，被設置爲通過以下方式列表：

.sidebar .widget { margin-top:20px; margin-bottom: 0px; padding-left:20px;} 
.sidebar .widget h5 {line-height: 13px; margin-bottom: 30px; font-weight: bold;font-family: 'Droid Serif', Georgia, Times, serif; } 
.sidebar .widget ul li { margin-bottom: 2px;background-color:#b3b1b2;padding:6px 2px; } 
.sidebar .widget ul li a { margin-bottom: 2px;background-color:#b3b1b2;color:#ffffff ;padding:6px 2px; } 
.sidebar .widget ul li a:hover { margin-bottom: 2px;background-color:#dadada;color:#202e3b ;padding:6px 2px; } 
.sidebar .widget ul li a:active { margin-bottom: 2px;background-color:#dadada;color:#202e3b ;padding:6px 2px; } 

在這裏看到的頁面：http://www.mahabbanetwork.com/who-we-are/

不過，我想懸停狀態來將整個「欄」的顏色更改爲更淺的灰色，即全寬，而不僅僅是當前的文本背景。我已經玩過增加右手邊的填充，但是它相對於文本鏈接的長度/字符數增加了，這對於每個鏈接都是不同的。

本網站使用預編碼的WP模板，因此我不確定如何修改它以實現期望的效果，而不會在網站的其他地方搞亂任何東西。

幫助將不勝感激。

Answer 1

添加:hover到li

.sidebar .widget ul li:hover 
{ 
    background-color:#dadada; 
    color:#202e3b ; 
} 

Answer 2

懸停狀態灰色添加到.sidebar .widget ul li:hover，而不是.sidebar .widget ul li a:hover

.sidebar .widget ul li:hover 
{ 
    background-color:#dadada; 
    color:#202e3b ; 
}