Rendi l’elenco annidato come un albero

Come faccio a rendere il bordo verticale in questo arresto all’ultimo elemento?

Può essere solo CSS3 / browser compatibile moderno. Ma ha bisogno di lavorare su vari background (cioè essere trasparente).

http://jsfiddle.net/ShgD6/

Da questa:

Lista indesiderata

A questa:

Lista ricercata

Ho risolto questo tramite modifiche al css in questo violino:

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

Puoi selezionare l’ultimo elemento dell’elenco usando la CSS :last-child pseudo-class :last-child come questa:

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

Le impostazioni della sua altezza a 0,7 mi sembravano funzionare per me, tagliando la coda sul bordo sinistro. Ho aggiunto alcuni altri gruppi nidificati nel mio violino per mostrare che funzionerà anche quando il contenuto cambia e vengono aggiunti altri gruppi nidificati.

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