I have an (expandable by js) list in the format of:\[code\]<ul> <li> <span class="arrow"></span> <span class="icon"></span> <span class="title">blah</span> <ul> <li> <span class="arrow"></span> <span class="icon"></span> <span class="title">blah</span> <ul> ... </ul> </li> </ul> </li> <li> <span class="arrow"></span> <span class="icon"></span> <span class="title">blah</span> <ul> ...</ul>\[/code\]Giving a typical layout of:\[code\] - X blah - X blah . X blah - X blah . X blah . X blah - X blah . X blah . X blah . X blah + X blah- X blah - X blah\[/code\]I would like to highlight individual \[code\]<li>\[/code\]'s by setting background for one or more items.In order or apart. Is there some way to get it to fill the whole "line"?Say for example blah 2 is selected I would like:\[code\] |===================| <- this range - blah 1 + blah 2 |===============| <- not this\[/code\]As I get by:\[code\].selected { background : url('./img/selected.png') repeat-x;}\[/code\]I have tried fiddling around with margins etc. but can't get it to render the way I'd like.Any ideas?EDIT:Here's a fiddle http://jsfiddle.net/zEShd/1E.g. like the selected row under "Groups & Items" here.
