Расширяемый список меню деревьев

Я хочу достичь следующего:

Я хочу иметь список древовидных представлений, который будет отображаться в левой части страницы, когда элемент будет расширен, элементы загружаются из базы данных (я могу сделать эту часть), поэтому в основном это будет похоже на это:

+Category1
+Category2
+Category3
+Category4

Когда пользователь нажимает на +, он покажет ниже, пока данные не будут схвачены из БД и не добавлены на страницу:

+Category1
-Category2
    loading ...
+Category3
+Category4

После загрузки данных каждая подкатегория WILL имеет под-подкатегорию.

+Category1
-Category2
    +Sub-Cat1
    +Sub-Cat2
    +Sub-Cat3
    +Sub-Cat4
+Category3
+Category4

Как я могу это достичь?

ПРИМЕЧАНИЕ. Я хочу знать, как поставить (* или > или любой другой символ для списка, я считаю, что это CSS, но я вообще не работаю с дизайном!!)

Ваша помощь действительно оценена.

Ответ 1

Есть ли у вас какие-либо требования к браузеру? Я использовал пример [CSS] Ninja, а также selectivizr для поддержки более старых версий IE. У вас нет доступного примера, кроме того, что находится на сайте [CSS] Ninja:

Чистое меню CSS с разворачивающимся деревом

И selectivizr:

selectivizr

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

Ответ 2

ok, поэтому я предполагаю, что ваш список элементов - это ul Каждому элементу вы можете добавить класс с именем closed, этот clase будет выглядеть так: css:

.closed:before{content:'+';}
.opened:before{content:'-';}

Затем