Здравствуйте.
Требуется построить вот такую менюшку:


Менюшку, меняющюю свойства/содержимое в зависимости от действий пользователя,  генерирую с помощью php-скрипта,с этим проблем нет. 

Проблема в том, как лучше ее разметить?
Можно сделать таблицей, можно дивами, можно списками...

Хотелось бы выбрать такие элементы, чтобы все размеры/отступы задавались при помощи css-таблицы, то есть разметка с помощью картинок, воткнутых в таблицу не подходит.

В общем-то, почти все сделал с использованием <div> и применением к ним различных css-стилей для разных уровней списка.
Теперь остается придумать, как сделать зеленый квадратик с зеленой чертой...

Спасибо.

Добавлено через 3 минуты и 27 секунд
(тестирую вот тут

http://kometeh.ru/Binarcom/index.php?conte...t&family=e1

вообще, список - он и в африке список. то есть делать следует на элементах ul - li



для открытого пункта фоном указать этот квадратик.

для открытого блока - фоном указать рисунок с линией (высотой в 1пк, размноженный по вертикали)




но в ul - li это выглядело бы изящнее

Лучше строить не в div а в элементах списка,
в вашем случае я бы выбрал что то такое




Квадратик фоном к ol li.active
Линию фоном к ol li.active ul (однопиксельный фон с repeat-y)

П.С. Информацию которая является списком нужно подавать именно списком, вас же не только люди читают, а ещё и поисковые системы.
    

По-моему, в таком меню все уровни равноправны и напрашивается обычные вложенные ul. Порядок пунктов в перечислениях произволен (ol лишний), связи "термин — расшифровка" или "имя — значение" между пунктами первого уровня и вложенными списками я тоже не вижу (dl/dt/dd как-то "не в тему"). Отступы можно регулировать с помощью каскадирования, например

SelenIT, 
KuZyagroup, 
bars80080, 

Спасибо всем за советы. Приступил наконец-то к переделке. О результатах отпишусь! ;)

Сделал, но слона увидел только через месяц при наполнении каталога.

Проблема в следующем - чтобы вертикальная линия рисовалась четко под квадратиком, пришлось отступ у списка второго уровня сделать равным нулю. А чтобы текст не наползал на квадратик, отодвинул его text-indent-ом.
Все бы хорошо, но многострочный текст теперь выглядит криво.

(На этой ссылке смотрите, как уползло "анализаторы цифрового телевидения")

http://binarcom/index.php?content=katalog&...lass=11transnet


Есть идея убрать текст-интенд, а внутрь тега li вставить div со свойством margin или padding.
Но это опять загромождение лишними тегами. Может, можно проще?

В общем, вставил внутрь тегов li элементы div, отодвинул в них текст и проблема решилась.
Идинственное, не понимаю, почему в разных броузерах маленький зеленый квадратик отбражается по-разному - например, в ИЕ он "сползает" вверх.
Пример тут:
http://binar-com.ru/index.php?content=kata...p;device=max_e1


И второе.



А чем плох тег div для поисковых систем?

сорри, какая связь? размеры квадратика ведь постоянны, всегда можно подогнать background-position... чего я не понимаю?

Квадратик рисовался как надо, а вот линия - соответственно позиции элемента li. То есть если он сдвинут вправо, то и линия сдвигалась вправо. И левее ее уже не задвинуть было.