Разберу решение пошагово — вот полный код для разворачивающегося древовидного меню на HTML и CSS.


## HTML-структура

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Древовидное меню</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="tree-menu">
        <ul>
            <li><a href="#">Главная</a></li>
            <li class="has-children">
                <a href="#">Продукты</a>
                <ul class="submenu">
                    <li><a href="#">Виджеты</a></li>
                    <li><a href="#">Гаджеты</a></li>
                    <li class="has-children">
                        <a href="#">Аксессуары</a>
                        <ul class="submenu">
                            <li><a href="#">Чехлы</a></li>
                            <li><a href="#">Зарядные устройства</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Контакты</a></li>
            <li><a href="#">О компании</a></li>
        </ul>
    </nav>
</body>
</html>
```

## CSS-код (style.css)

```css
/* Базовые стили для меню */
.tree-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tree-menu a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 10px 15px;
    transition: all 0.3s ease;
}

.tree-menu a:hover {
    background-color: #e9ecef;
    color: #007bff;
}

/* Стили для пунктов с подменю */
.has-children > a {
    position: relative;
    padding-right: 30px;
}

.has-children > a::after {
    content: "▶";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

/* Подменю — изначально скрыто */
.submenu {
    display: none;
    padding-left: 20px;
}

/* Показываем подменю при наведении */
.has-children:hover .submenu {
    display: block;
}

/* Меняем стрелку при наведении */
.has-children:hover > a::after {
    content: "▼";
}

/* Дополнительные стили для улучшения внешнего вида */
.tree-menu {
    font-family: Arial, sans-serif;
    max-width: 300px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.tree-menu li {
    border-bottom: 1px solid #eee;
}

.tree-menu li:last-child {
    border-bottom: none;
}
```

---

## Как это работает

1. **HTML-структура**:
   * Используется вложенность `<ul>` внутри `<li>` для создания иерархии.
   * Класс `has-children` помечает пункты с подменю.
   * Класс `submenu` применяется к вложенным спискам.

2. **CSS-логика**:
   * Подменю (`submenu`) изначально скрыто (`display: none`).
   * При наведении на пункт с классом `has-children` подменю становится видимым (`display: block`).
   * Стрелка-индикатор меняется с «▶» на «▼» при наведении.

3. **Визуальные эффекты**:
   * Плавная смена цвета фона при наведении (`transition`).
   * Отступы для вложенности (`padding-left: 20px`).
   * Тень и скруглённые углы для эстетики.

---

## Варианты улучшений

1. **Плавное раскрытие** (замените `display` на `max-height`):
```css
.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.has-children:hover .submenu {
    max-height: 500px; /* Подберите значение под своё меню */
}
```

2. **Использование `details/summary`** (современный подход без `:hover`):
```html
<details>
    <summary>Продукты</summary>
    <a href="#">Виджеты</a>
    <a href="#">Гаджеты</a>
</details>
```
```css
details > summary {
    cursor: pointer;
}
```

3. **Анимированные линии** (для визуального отображения иерархии):
```css
.tree-menu li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #ddd;
}
```