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/

但是，我希望悬停状态改变整个＆＃34; bar＆＃34;的颜色。浅灰色，即全宽，而不仅仅是目前的文本背景。我已经开始使用增加右侧填充，但它当然会相对于文本链接的长度/字符数增加它，这对于每个链接是不同的。

此网站使用预编码的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 ;
}

CSS子菜单悬停颜色问题

2 个答案: