Как создать выпадающее меню в WordPress?

Чтобы добавить кнопку для открытия подменю при клике, вам нужно будет внести изменения в вашу HTML-структуру и добавить немного JavaScript для обработки кликов. Вот пошаговая инструкция:

### Шаг 1: Изменение HTML структуры

Измените структуру вашего меню так, чтобы для каждого пункта с подменю появлялась кнопка для открытия. Пример вашего HTML-кода с кнопкой для подменю:

```html
<nav class="header__main-menu">
    <ul class="main-menu__list">
        <li class="menu-item">
            <a href="#">Services1</a>
            <button class="submenu-toggle">Toggle Submenu</button>
            <ul class="sub-menu">
                <li class="menu-item"><a href="#">Услуга1</a></li>
                <li class="menu-item"><a href="#">Услуга2</a></li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="#">Services2</a>
            <button class="submenu-toggle">Toggle Submenu</button>
            <ul class="sub-menu">
                <li class="menu-item"><a href="#">Услуга1</a></li>
                <li class="menu-item"><a href="#">Услуга2</a></li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="#">Services3</a>
        </li>
        <li class="menu-item">
            <a href="#">Services4</a>
        </li>
    </ul>
</nav>
```

### Шаг 2: Добавление CSS для кнопки

Убедитесь, что ваша кнопка красиво вписывается в дизайн меню. Вы можете добавить CSS:

```css
.submenu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: blue; /* Должно соответствовать вашему стилю */
    margin-left: 5px; /* Отступ от текста ссылки */
}
```

### Шаг 3: Добавление JavaScript для управления кликами

Добавьте следующий JavaScript код, чтобы обработать клики по кнопкам:

```javascript
document.addEventListener('DOMContentLoaded', function() {
    const toggles = document.querySelectorAll('.submenu-toggle');

    toggles.forEach(toggle => {
        toggle.addEventListener('click', function(e) {
            // Получаем ближайший родительский элемент LI
            const menuItem = e.currentTarget.parentElement;
            const submenu = menuItem.querySelector('.sub-menu');

            // Если подменю открыто, то скрываем его, иначе показываем
            if (submenu.style.display === 'block') {
                submenu.style.display = 'none';
            } else {
                submenu.style.display = 'block';
            }
        });
    });
});
```

### Шаг 4: Закрытие подменю при клике в другое место (опционально)

Если вы хотите, чтобы подменю закрывалось при клике в любое другое место, вы можете добавить следующий код:

```javascript
document.addEventListener('click', function(e) {
    if (!e.target.closest('.header__main-menu')) {
        const openSubmenus = document.querySelectorAll('.sub-menu[style*="display: block"]');
        openSubmenus.forEach(submenu => {
            submenu.style.display = 'none';
        });
    }
});
```

### Итог

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

В соответствии со спецификацией, внутри элемента li можно использовать любые другие элементы. Поэтому вы можете просто добавить кнопку, а ниже разместить список: