Select entire line in nested list on hover

Question

Context

I have <li><div></div></li> elements with hover background color.

Looks like:

I want to color the entire line, for example:

Study

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 fields from ul / li, set the content wrappers to display:block , and then put the padding tags on these 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 this with :: before - check the following solution.

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