Привет всем.

Вот тут приведен пример того, что я хотел бы сделать
http://web.artlebedev.ru/tools/technogrette/html/treeview/

Но этот пример мне кажется достаточно сложным. Т.е. я никак не могу до конца понять как это реализовано, чтобы применить к своему случаю. В частности не понятно, как сделаны эти точечки.

Может кто поможет разобраться в основных моментах или предложит другой вариант реализации.

Ну ё маё. Для чего великие люди фаербаг писали?
Короче.
Эти точечки - это точечные, однопиксельные границы.
Левая - от LI
Нижняя - от DIV
У вложенного в DIV параграфа (P) установлено абсолютное позиционирование, но для позиционирования используется относительные величины (em).
Небольшой относительный сдвиг влево и вниз. Вот и все чудо.

что это точечные, однопиксельные границы, это я понимал.

Мне не было понятно от чего это границы. Спасибо за объяснение, теперь понял.

Остались 2 вещи которые мне не совсем нравятся:
1. Нижняя граница идет на всю страницу, можно ли ее как-то обрезать, чтобы она доходила только до начала текста?
2. Избавиться от 2-х элементов не получиться? (div, p) Хотелось бы поместить все в 1.

Смысл в том, что смещенный P закрывает собой границу, идущую до конца блока
Для этого у него проставлен свой background-color, Хотя фактически он такой же. Но это позволяет закрыть границу.