The html snipped below renders a nested list of elements. On hover (mouse over) the elements background color changes. But a space is left uncolored on the left (due to the indentation).
How would I get that space to be colored as well?
I tried to add absolute
positioned elements to the li
elements with left:0
. But those partially hide the content of the li
elements :/
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>