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

Я уже как-то писал статью о том, как сделать меню на чистом CSS. Но тогда это меню делалось на float , а теперь я расскажу как сделать его при помощи flexbox.

Как и впрошлый раз, я не буду расписывать все до мельчайших подробностей, но теперь, я прикреплю видео, которое возможно вам поможет больше. Видео я прикреплю ниже 😉

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>

CSS

.menu {
    display: flex;
    flex-direction:row;
    justify-content:space-around;
    margin: 0;
    padding: 0;
    list-style: none;
    border:1px solid black;
    border-radius:3px;
}
.menu li{
  position:relative;
}
.menu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: white;
    color:black;
    text-decoration: none;
    transition: all 0.3s ease;
}
.menu li a:hover {
    background-color: black;
    color:white;
}
.submenu {
    display: none;
    position: absolute;
    width: 100px;
    bottom: 0px;
    left: 0px;
    background-color: white;
    transform:translate(0,100%);
    border: 1px solid black;
    border-radius:0 0 3px 3px;
}
.submenu li {
    display: block;
}
.submenu li a {
    display: block;
    padding: 10px;
    color:black;
    text-decoration: none;
}
.menu li:hover .submenu {
    display: block;
}

А вот и само видео, как я и обещал 🙂
Буду очень благодарен, если вы подпишетесь на мой канал на youtube, а также поставите данному видео лайк.

И еще, у нас есть телеграм-канал, чтобы вы всегда были вкурсе новых статей 😉
Если у вас есть вопросы, или интересные темы для статьи, которые хотите что бы я подсветил, оставляйте свои комментарии 🙂