CSS子菜单悬停颜色问题答案

【问题标题】：CSS submenu hover color issueCSS子菜单悬停颜色问题
【发布时间】：2014-03-31 16:28:44
【问题描述】：

我在 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 模板，所以我不知道如何修改它来达到想要的效果，而不会把网站上其他地方弄乱。

我们将不胜感激。

【问题讨论】：

非常感谢。这成功了！

标签： css wordpress templates

【解决方案1】：

将:hover 添加到li

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

【讨论】：

【解决方案2】：

将悬停状态灰色添加到.sidebar .widget ul li:hover而不是.sidebar .widget ul li a:hover

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

【讨论】：