title: full width :hover background for nested lists?
body: <p>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).</p>
  
  <p>How would I get that space to be colored as well?</p>
  
  <p>I tried to add <code>absolute</code> positioned elements to the <code>li</code> elements with <code>left:0</code>. But those partially hide the content of the <code>li</code> elements :/</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul { 
    list-style: none; 
    padding: 0; 
    margin:0 
  }
  li { 
    margin:0;
    padding: 0; 
    padding-left: 20px; 
  }
  li &gt; div:hover { 
    background-color: #eee
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="position:relative"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;div&gt;Root&lt;/div&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;div&gt;A&lt;/div&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;div&gt;AA&lt;/div&gt;&lt;/li&gt;
              &lt;li&gt;&lt;div&gt;AB&lt;/div&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;div&gt;B&lt;/div&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;div&gt;BA&lt;/div&gt;&lt;/li&gt;
              &lt;li&gt;&lt;div&gt;BB&lt;/div&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>