Linhas de nó de árvore baseadas em CSS

Um método para adicionar as linhas que conectam os nós em uma árvore que requer apenas uma única imagem de 1×1 pixel. Não requer nenhuma marcação extra (além de duas classes extras no UL raiz), atributos de dados ou scripts. Existem scripts carregados na demonstração, mas isso é apenas para que a árvore seja realmente recolhível / expansível.

http://jsfiddle.net/isochronous/2N5EP/

A técnica requer suporte para vários fundos em um único elemento, a propriedade background-size e background-offset.

Atualização: Eu atualizei o violino para remover todas as classes extras (shim HTML5, classes de redefinição, etc) e adicionei comentários para explicar como tudo funciona. Confira!