Render nested list like a tree

Question

How would I make the vertical border in this stop at the last element?

It can be CSS3/modern browser compatible only. But needs to work on various backgrounds (i.e. be transparent).

http://jsfiddle.net/ShgD6/

From this:

To this:

Answer 1

I solved this via modifications to the css in this fiddle:

http://jsfiddle.net/YYdwc/2/

Answer 2

You can select the last list item by using the CSS :last-child pseudo-class like this:

ul li:last-child {
    height: 0.7em;
}

Settings its height to 0.7em seemed to work for me, chopping off the tail on the left border. I added a few more nested groups in my fiddle to show it'll work even when the content changes and more nested groups are added.

http://jsfiddle.net/wdages/sC5pc/3/