改变<li>的背景颜色看起来很有趣</li>

Question

我有一个li元素。如果li元素是单行，则在悬停背景颜色时看起来没问题，但是当li元素包含多行文本时，背景颜色看起来有点糟糕。 请参阅随附的屏幕截图。

  #leftNavi li a.current{
color: white;
background: #AD0E3F; 
text-decoration: none;
  }

  #leftNavi li a:hover{
color: white;
background: #AD0E3F;
  }

Answer 1

您需要使用另一个包含LI内容的节点，并将:hover放在LI而不是A上。并使LI浮动以避免全宽。

<li>
  <div>
    <a class="current" href="#"></a>
  </div>
</li>

Answer 2

简单配偶只需添加：

#leftNavi li a{display:block;}

参见示例：http://jsfiddle.net/ajthomascouk/5NpAz/