Как сделать выпадающее меню на чистом CSS

Сейчас, уже довольно распространенная практика использовать выпадающее меню на сайтах. Чтобы реализовать такую задачу, можно использовать несколько способов, но я расскажу про самый простой, это меню без использования JavaScript / Jquery

Расписывать тут все прям до тонкостей не буду, но расскажу про основное.

HTML

Для начала сделаем HTML- структуру нашего выпадающего меню

Все что мы сделали, создали основной список, с классом menu и дальше, в каждую li мы положили новые списки, которые являются нашими подменю, так же это можно понять и по классу который мы им присвоили submenu

CSS

Добавим немного стилей для меню и сделаю все магию появления выпадающего меню

Немного внесу пояснения, чтобы вам было понятнее как это работает. Все элементам с классом submenu мы присвоили значение display: none. И теперь нам необходимо сделать что бы при наведении на одну из li главного меню, появлялось подменю. Это мы сделали при помощи таких стилей:

Они и позволяют видеть подменю при наведении.

Если у вас есть вопросы, пишите в комментарии, буду рад помочь.
Чтобы не пропустить выход новых статей, подписывайтесь на мой telegram-канал

Оставьте ответ

comment-avatar

*