Renderuj zagnieżdżoną listę jak drzewo

Question

Jak utworzyć pionową ramkę w tym miejscu przy ostatnim elemencie?

Może to być tylko CSS3/nowoczesna przeglądarka. Ale musi pracować na różnych środowiskach (tj. Być przezroczystym).

http://jsfiddle.net/ShgD6/

Z tego:

do tego:

Answer 1

I rozwiązać to poprzez modyfikacje css w tym skrzypce:

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

Answer 2

Można wybrać ostatnią pozycję z listy za pomocą pseudo-klasę CSS :last-child tak :

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

Ustawienia wysokości do 0.7em sprawdziły się dla mnie, odrąbując ogon na lewej krawędzi. Dodałem jeszcze kilka zagnieżdżonych grup do mojego skrzypiec, aby pokazać, że zadziała, nawet jeśli zawartość zmieni się i dodane zostaną grupy zagnieżdżone.

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