full width :hover background for nested lists?

Question

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>

Answer 1

Add the padding to the divs instead of the <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}

Demo: http://jsfiddle.net/Madmartigan/MKK8v/

By setting it on the list item, you end up padding all the child list items as well. If you can alter your markup, I think there are better ways though.

Answer 2

You could use this CSS to make your div's fill the indents so that space is not left uncoloured on the :hover effect, then set the overflow to hidden on the parent wrapper.

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

This way it is generic so that you can have as many sub <ul> and <li> tags as you need. Here is a link to a JSFiddle with a working example.

Answer 3

There problem occurs,because you have applied padding-left: 20px;,So that Hover will not applied to that part which contains 20px padding from left.

As my suggestion,For proper html structure & css,You have to assign class or id name to <li> & <div> element,due to that you can easily detect problem & get powerful structure.