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

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

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

HTML

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

<ul class="menu">
    <li><a href=#>Menu 1</a>
        <ul class="submenu">
            <li><a href=#>SubMenu 1</a></li>
            <li><a href=#>SubMenu 1</a></li>
            <li><a href=#>SubMenu 1</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 2</a>
        <ul class="submenu">
            <li><a href=#>SubMenu 2</a></li>
            <li><a href=#>SubMenu 2</a></li>
            <li><a href=#>SubMenu 2</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 3</a>
        <ul class="submenu">
            <li><a href=#>SubMenu 3</a></li>
            <li><a href=#>SubMenu 3</a></li>
            <li><a href=#>SubMenu 3</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 4</a>
        <ul class="submenu">
            <li><a href=#>SubMenu 4</a></li>
            <li><a href=#>SubMenu 4</a></li>
            <li><a href=#>SubMenu 4</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 5</a>
        <ul class="submenu">
            <li><a href=#>SubMenu 5</a></li>
            <li><a href=#>SubMenu 5</a></li>
            <li><a href=#>SubMenu 5</a></li>
        </ul>
    </li>
</ul>

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

CSS

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

ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul:after {
    display: block;
    content: ' ';
    clear: both;
    float: none;
}
ul.menu > li {
    float: left;
    position: relative;
}
ul.menu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.menu > li > a:hover {
    background-color: black;
}
ul.submenu {
    display: none;
    position: absolute;
    width: 120px;
    top: 37px;
    left: 0;
    background-color: white;
    border: 1px solid red;
}
ul.submenu > li {
    display: block;
}
ul.submenu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.submenu > li > a:hover {
    text-decoration: underline;
}
ul.menu > li:hover > ul.submenu {
    display: block;
}

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

ul.menu > li:hover > ul.submenu {
    display: block;
}

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

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

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