全宽:嵌套列表的悬停背景？

Question

下面剪辑的html呈现嵌套的元素列表.悬停(鼠标悬停)时,元素背景颜色会发生变化.但是左边的空间没有留下(由于压痕).

我怎样才能让那个空间变成彩色？

我尝试将absolute定位元素添加到li元素中left:0.但那些部分隐藏li元素的内容:/

ul { 
  list-style: none; 
  padding: 0; 
  margin:0 
}
li { 
  margin:0;
  padding: 0; 
  padding-left: 20px; 
}
li > div:hover { 
  background-color: #eee
}

<div style="position:relative">
  <ul>
    <li><div>Root</div>
      <ul>
        <li><div>A</div>
          <ul>
            <li><div>AA</div></li>
            <li><div>AB</div></li>
          </ul>
        </li>
        <li><div>B</div>
          <ul>
            <li><div>BA</div></li>
            <li><div>BB</div></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

将填充添加到div而不是<li>:

ul { list-style: none; padding: 0; margin:0 }
li { margin:0; padding: 0;}
li > div:hover { background-color: #eee}
li div{padding-left:20px}
li li div{padding-left:40px}
li li li div{padding-left:60px}

演示:http://jsfiddle.net/Madmartigan/MKK8v/

通过在列表项上设置它,您最终也会填充所有子列表项.如果你可以改变你的标记,我认为有更好的方法.

Answer 2

你可以使用这个CSS来使你的div填充缩进,这样空间就不会在:悬停效果上保持无色,然后将溢出设置为隐藏在父包装上.

li div{
  padding-left: 100%;
  margin-left: -100%;
}

这种方式是通用的,因此您可以根据需要拥有尽可能多的子<ul>和<li>标签.这是一个带有工作示例的JSFiddle的链接.