Выпадающее меню   помощи чистого HTML кода.

Выпадающее меню при помощи чистого HTML кода.
Важный момент, элементы участвующие в создании выпадающего меню входит в спецификацию html5.
Некоторые отнесутся скептически к такому подходу, ибо он не имеет особой гибкости (как руки заточены)
Давайте же, рассмотрим с чем мы будем иметь дело при создание выпадающего меню.

Тег <details> предназначен обрамления информации, которая показывается по требованию пользователя или скрывается.
Тело тега <details> по умолчанию не отображается,  для отображения внутренностей тела тега <details> используется атрибут="open". Совместно с тегом <details> используются тег <summary>,  он является логическим заголовком в скрытого содержимого. Ниже приведён пример вложенных списков,  глубиной 2 уровня.  Принцип вложения аналогичен спискам <ul> и <ol>.

Синтаксис:

<details>
    <summary>Seo-опимизация</summary>
    <ul>
        <li>Контент-контроль</li>
        <li>Валиднсть</li>
        <li>Семантика</li>
    </ul>

    <details>
        <summary>Продвижение </summary>
        <ul>
            <li>Ссылочная масса</li>
            <li>Работа с контентом</li>
            <li>Другое</li>
        </ul>
    </details>
</details>

Пример:

Сама по себе статья называется создание выпадающего меню на чистом HTML, поэтому мы не будем рассматривать здесь анимацию и оформление меню при помощи стилей CSS, но это легко сделать при помощи свойств CSS transition и далее по вкусу.