<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<style>
*,
*::before,
*::after {
box-sizing: inherit;
}
/* блок контейнер навигации */
.main-navigation {
background-color: rgb(0, 0, 0);
font-family: "Roboto";
align-items: center;
display: flex;
justify-content: center;
padding-top: 5px;
z-index: 14;
}
/* главное меню */
.menu-main {
display: flex;
list-style: none;
padding: 0;
justify-content: space-between;
align-items: center;
width: 90%;
}
/* пункт главного меню */
.menu-item {
padding: 0;
position: relative;
display: block;
align-items: flex-start;
}
/* псевдоэлемент пункта главного меню (для ховера) */
.menu-item::after {
content: "";
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
height: 30px;
}
/* ссылка в пункте меню */
.menu-link {
color: inherit;
text-decoration: inherit;
font-weight: inherit;
font-size: inherit;
color: rgb(214, 214, 214) !important;
display: block;
white-space: nowrap;
font-family: 'Roboto';
text-transform: uppercase;
white-space: nowrap;
padding: 5px 0;
}
/* ссылка в пункте меню при наведении */
.menu-link:hover {
color: rgb(255, 255, 255) !important;
}
/* блок подменю */
.submenu {
display: flex;
padding: 20px;
background-color: rgb(241, 241, 241);
font-size: 14px;
z-index: 14;
position: absolute;
top: 45px;
left: 0;
visibility: hidden;
outline: 1px dotted red;
}
/* ссылка в блоке подменю */
.submenu .menu-link {
color: rgb(0, 0, 0) !important;
}
/* ссылка в блоке меню при наведении */
.submenu .menu-link:hover {
color: rgb(26, 26, 26) !important;
}
/* блок подменю при наведении на пункт меню */
.menu-item:hover .submenu {
visibility: visible;
}
/* колонка в подменю */
.submenu-column {
list-style: none;
padding: 0;
margin-right: 20px;
}
/* заголовок колонки в подменю */
.submenu-column-header {
font-weight: 700;
}
</style>
<nav class="main-navigation">
<ul class="menu-main">
<li class="menu-item">
<a class="menu-link" href="#">Продукты</a>
<ul class="submenu">
<ul class="submenu-column">
<li class="submenu-column-item submenu-column-header">
<a class="menu-link" href="/color">Колонка №1</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/technofruit-color">TechnoFruit Color</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/my-color">My color</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/booster">Booster</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/be-blonde">Be Blonde</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/coactivator">Coactivator cream</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/utils">Utilities</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/passion-colormask">Passion color mask</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/egobond">EgoBond</a>
</li>
</ul>
<ul class="submenu-column">
<li class="submenu-column-item submenu-column-header">
<a class="menu-link" href="/care">Колонка №2</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/be-blonde-care">Be blonde</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/botanikare">Botanikare</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/arganikare">Arganikare</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/urban-proof">Urban proof</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/toxkare">B.Toxkare</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/egoliss-care">Egoliss</a>
</li>
</ul>
<ul class="submenu-column">
<li class="submenu-column-item submenu-column-header">
<a class="menu-link" href="/style">Колонка №3</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/ht-runway">runway collection</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/ht-create-n-texturize">create & texturize</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/ht-thickening-n-volumizing">thickness & volumazing</a>
</li>
</ul>
<ul class="submenu-column">
<li class="submenu-column-item submenu-column-header">
<a class="menu-link" href="/form">Колонка №4</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/egoliss-form">Egoliss</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/plasmante">Plasmante</a>
</li>
</ul>
<ul class="submenu-column">
<li class="submenu-column-item submenu-column-header">
<a class="menu-link" href="/man">Колонка №5</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/grooming-for-men">Grooming for man</a>
</li>
<li class="submenu-column-item">
<a class="menu-link" href="/grooming-man-beard">Grooming man & beard</a>
</li>
</ul>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="/education">Обучение</a>
</li>
<li class="menu-item">
<a class="menu-link" href="/collections">Коллекции</a>
</li>
<li class="menu-item">
<a class="menu-link" href="/company">О компании</a>
</li>
<li class="menu-item">
<a class="menu-link" href="/contacts">Контакты</a>
</li>
<li class="menu-item">
<a class="menu-link" href="" target="_blank">Магазин</a>
</li>
</ul>
</nav>
Простой
