html – 全宽：悬停列表的悬浮背景？

下面的html剪辑呈现一个嵌套的元素列表.悬停(鼠标悬停)元素背景颜色变化.但左侧的空间是无色的(由于缩进).

我如何才能使这个空间被染色？

我试图添加绝对定位元素到li元素左：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>

解决方法

将填充添加到div,而不是< li&gt ;::

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/

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

原文地址：https://www.jb51.cc/html/230731.html