html - 全宽 :hover background for nested lists?

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

您可以使用此 CSS 使您的 div 填充缩进，以便在 :hover 效果上不会留下未着色的空间，然后将溢出设置为隐藏在父包装器上。

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

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