Highlight entire line in a nested list on hover

Question

Context

I've <li><div></div></li> elements with a background color on hover.

It looks like :

I want to color the full line, like :

Investigation

The code:

div.wrapper:hover {
  background: rgba(220, 220, 220, 0.3);
}

I tried this, without success:

div.wrapper:hover:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  right: 0;
  background: rgba(220, 220, 220, 0.3);
}

Question

How can I do this?

Answer 1

Remove all margins from your ul/li, set your content wrappers to display:block, and then put padding on those elements based on the nesting level: http://jsfiddle.net/dYdQB/

HTML

<ul>
  <li><span>Hello</span></li>
  <li><span>World</span><ul>
    <li><span>Nested deeper</span></li>
    <li><span>And again</span><ul>
      <li><span>And Even Deeper</span></li>
    </ul></li>
  </ul></li>
</ul>
​

CSS

ul, li { margin:0; padding:0 }
ul li span { display:block }
ul li span:hover { background:orange }
li span       { padding-left:2em }
li li span    { padding-left:4em }
li li li span { padding-left:6em }​

Answer 2

try to do it with ::before - check following solution can help.

http://jsfiddle.net/t3SvL/3/