Разворачивающееся древовидное меню

Вот пример простого CSS-кода для разворачивающегося древовидного меню на HTML странице: Разворачивающееся древовидное меню

Корень
- Дочерний элемент 1
  - Подэлемент 1
  - Подэлемент 2
- Дочерний элемент 2
  - Подэлемент 3
  - Подэлемент 4

Как это работает? - скрыт с помощью CSS (display: none), используется лишь для хранения состояния чекбокса («развернуто/свёрнуто»). - Метка привязана к соответствующему чекбоксу, благодаря чему клик по метке переключает состояние чекбокса. - CSS-правило .input[type='checkbox']:checked ~ ul { display: block; } показывает дочернее меню, когда соответствующий чекбокс отмечен. Этот способ удобен и позволяет легко расширять структуру дерева меню, добавляя новые уровни и элементы.