<div class="header-home">
<div>
<header id="headerMenu">
<div class="container">
<div class="header-wrap">
<div class="head-text">Категории</div>
<div class="header-bottom-block">
<div data-menu="h-menu-for-self">
<div class="hl-item">
<div class="hl-block">
<div uk-grid>
<div class="uk-width-expand flex align-items-center hl-item-height">
<span class="hl-item-title substr">
<img src="/assets/img/icons/categories/1.svg">
Товары для дома
</span>
</div>
<div class="uk-width-auto flex align-items-center" style="padding-left: 0;">
<div class="hl-arrow-right-hover"></div>
</div>
</div>
</div>
<div class="h-wrap-sub-menu">
<div class="h-sub-menu">
<div class="h-sub-menu-grid width-100">
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
</div>
</div>
</div>
</div>
<div class="hl-item">
<div class="hl-block">
<div uk-grid>
<div class="uk-width-expand flex align-items-center hl-item-height">
<span class="hl-item-title substr">
<img src="/assets/img/icons/categories/1.svg">
Товары для дома
</span>
</div>
<div class="uk-width-auto flex align-items-center" style="padding-left: 0;">
<div class="hl-arrow-right-hover"></div>
</div>
</div>
</div>
<div class="h-wrap-sub-menu">
<div class="h-sub-menu">
<div class="h-sub-menu-grid width-100">
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
</div>
</div>
</div>
</div>
<div class="hl-item">
<div class="hl-block">
<div uk-grid>
<div class="uk-width-expand flex align-items-center hl-item-height">
<span class="hl-item-title substr">
<img src="/assets/img/icons/categories/1.svg">
Товары для дома
</span>
</div>
<div class="uk-width-auto flex align-items-center" style="padding-left: 0;">
<div class="hl-arrow-right-hover"></div>
</div>
</div>
</div>
<div class="h-wrap-sub-menu">
<div class="h-sub-menu">
<div class="h-sub-menu-grid width-100">
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
</div>
</div>
</div>
</div>
<div class="hl-item">
<div class="hl-block">
<div uk-grid>
<div class="uk-width-expand flex align-items-center hl-item-height">
<span class="hl-item-title substr">
<img src="/assets/img/icons/categories/1.svg">
Товары для дома
</span>
</div>
<div class="uk-width-auto flex align-items-center" style="padding-left: 0;">
<div class="hl-arrow-right-hover"></div>
</div>
</div>
</div>
<div class="h-wrap-sub-menu">
<div class="h-sub-menu">
<div class="h-sub-menu-grid width-100">
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
</div>
</div>
</div>
</div>
<div class="hl-item">
<div class="hl-block">
<div uk-grid>
<div class="uk-width-expand flex align-items-center hl-item-height">
<span class="hl-item-title substr">
<img src="/assets/img/icons/categories/1.svg">
Товары для дома
</span>
</div>
<div class="uk-width-auto flex align-items-center" style="padding-left: 0;">
<div class="hl-arrow-right-hover"></div>
</div>
</div>
</div>
<div class="h-wrap-sub-menu">
<div class="h-sub-menu">
<div class="h-sub-menu-grid width-100">
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
</div>
</div>
</div>
</div>
<div class="hl-item">
<div class="hl-block">
<div uk-grid>
<div class="uk-width-expand flex align-items-center hl-item-height">
<span class="hl-item-title substr">
<img src="/assets/img/icons/categories/1.svg">
Товары для дома
</span>
</div>
<div class="uk-width-auto flex align-items-center" style="padding-left: 0;">
<div class="hl-arrow-right-hover"></div>
</div>
</div>
</div>
<div class="h-wrap-sub-menu">
<div class="h-sub-menu">
<div class="h-sub-menu-grid width-100">
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
</div>
</div>
</div>
</div>
<div class="hl-item">
<div class="hl-block">
<div uk-grid>
<div class="uk-width-expand flex align-items-center hl-item-height">
<span class="hl-item-title substr">
<img src="/assets/img/icons/categories/1.svg">
Товары для дома
</span>
</div>
<div class="uk-width-auto flex align-items-center" style="padding-left: 0;">
<div class="hl-arrow-right-hover"></div>
</div>
</div>
</div>
<div class="h-wrap-sub-menu">
<div class="h-sub-menu">
<div class="h-sub-menu-grid width-100">
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
</div>
</div>
</div>
</div>
<div class="hl-item">
<div class="hl-block">
<div uk-grid>
<div class="uk-width-expand flex align-items-center hl-item-height">
<span class="hl-item-title substr">
<img src="/assets/img/icons/categories/1.svg">
Товары для дома
</span>
</div>
<div class="uk-width-auto flex align-items-center" style="padding-left: 0;">
<div class="hl-arrow-right-hover"></div>
</div>
</div>
</div>
<div class="h-wrap-sub-menu">
<div class="h-sub-menu">
<div class="h-sub-menu-grid width-100">
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
</div>
</div>
</div>
</div>
<div class="hl-item">
<div class="hl-block">
<div uk-grid>
<div class="uk-width-expand flex align-items-center hl-item-height">
<span class="hl-item-title substr">
<img src="/assets/img/icons/categories/1.svg">
Товары для дома
</span>
</div>
<div class="uk-width-auto flex align-items-center" style="padding-left: 0;">
<div class="hl-arrow-right-hover"></div>
</div>
</div>
</div>
<div class="h-wrap-sub-menu">
<div class="h-sub-menu">
<div class="h-sub-menu-grid width-100">
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
</div>
</div>
</div>
</div>
<div class="hl-item">
<div class="hl-block">
<div uk-grid>
<div class="uk-width-expand flex align-items-center hl-item-height">
<span class="hl-item-title substr">
<img src="/assets/img/icons/categories/1.svg">
Товары для дома
</span>
</div>
<div class="uk-width-auto flex align-items-center" style="padding-left: 0;">
<div class="hl-arrow-right-hover"></div>
</div>
</div>
</div>
<div class="h-wrap-sub-menu">
<div class="h-sub-menu">
<div class="h-sub-menu-grid width-100">
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
</div>
</div>
</div>
</div>
<div class="hl-item">
<div class="hl-block">
<div uk-grid>
<div class="uk-width-expand flex align-items-center hl-item-height">
<span class="hl-item-title substr">
<img src="/assets/img/icons/categories/1.svg">
Товары для дома
</span>
</div>
<div class="uk-width-auto flex align-items-center" style="padding-left: 0;">
<div class="hl-arrow-right-hover"></div>
</div>
</div>
</div>
<div class="h-wrap-sub-menu">
<div class="h-sub-menu">
<div class="h-sub-menu-grid width-100">
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
</div>
</div>
</div>
</div>
<div class="hl-item">
<div class="hl-block">
<div uk-grid>
<div class="uk-width-expand flex align-items-center hl-item-height">
<span class="hl-item-title substr">
<img src="/assets/img/icons/categories/1.svg">
Товары для дома
</span>
</div>
<div class="uk-width-auto flex align-items-center" style="padding-left: 0;">
<div class="hl-arrow-right-hover"></div>
</div>
</div>
</div>
<div class="h-wrap-sub-menu">
<div class="h-sub-menu">
<div class="h-sub-menu-grid width-100">
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
</div>
</div>
</div>
</div>
<div class="hl-item">
<div class="hl-block">
<div uk-grid>
<div class="uk-width-expand flex align-items-center hl-item-height">
<span class="hl-item-title substr">
<img src="/assets/img/icons/categories/1.svg">
Товары для дома
</span>
</div>
<div class="uk-width-auto flex align-items-center" style="padding-left: 0;">
<div class="hl-arrow-right-hover"></div>
</div>
</div>
</div>
<div class="h-wrap-sub-menu">
<div class="h-sub-menu">
<div class="h-sub-menu-grid width-100">
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
</div>
</div>
</div>
</div>
<div class="hl-item">
<div class="hl-block">
<div uk-grid>
<div class="uk-width-expand flex align-items-center hl-item-height">
<span class="hl-item-title substr">
<img src="/assets/img/icons/categories/1.svg">
Товары для дома
</span>
</div>
<div class="uk-width-auto flex align-items-center" style="padding-left: 0;">
<div class="hl-arrow-right-hover"></div>
</div>
</div>
</div>
<div class="h-wrap-sub-menu">
<div class="h-sub-menu">
<div class="h-sub-menu-grid width-100">
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
</div>
</div>
</div>
</div>
<div class="hl-item">
<div class="hl-block">
<div uk-grid>
<div class="uk-width-expand flex align-items-center hl-item-height">
<span class="hl-item-title substr">
<img src="/assets/img/icons/categories/1.svg">
Товары для дома
</span>
</div>
<div class="uk-width-auto flex align-items-center" style="padding-left: 0;">
<div class="hl-arrow-right-hover"></div>
</div>
</div>
</div>
<div class="h-wrap-sub-menu">
<div class="h-sub-menu">
<div class="h-sub-menu-grid width-100">
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
<hr class="h-sub-menu-divider" />
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
<div class="h-sub-menu-block">
<span class="h-title-small">Для тела</span>
<a href="#">Маски</a>
<a href="#">Шампунь</a>
<a href="#">Масло</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>
</div>/* left nav */
/* высота блоков задана здесь */
.header-wrap, .h-sub-menu {
height: 200px;
}
.header-wrap:hover {
min-height: 200px;
}
#headerMenu {
position: relative;
}
/* затемнение */
.header-wrap {
position: relative;
z-index: 9999;
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
box-shadow: 0 4px 8px 0 #0000000F;
}
#headerMenu::after {
content: '';
position: fixed;
z-index: 3;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
#headerMenu:hover::after {
opacity: 1;
}
#headerMenu .container {
position: static;
width: 100%;
}
.head-text {
font-size: 20px;
padding: 15px 0 0 19px;
}
.header-bottom-block {
position: relative;
}
.hl-item-title {
position: relative;
display: block;
font-size: 14px;
}
.hl-item:hover .hl-item-title:after {
content: '';
height: 1.5px;
position: absolute;
width: 100%;
left: 0;
bottom: -1.5px;
z-index: 2;
}
.hl-item-title img {
height: 18px;
margin-right: 5px;
}
.hl-item-height {
height: 32.25px;
}
/* изменение стрелочки справа при наведении */
.hl-arrow-right-hover {
height: 15px;
width: 7.5px;
background: url("/assets/img/icons/arrow-right.svg") no-repeat;
background-size: contain;
}
.hl-item:hover .hl-arrow-right-hover {
background-image: url("/assets/img/icons/arrow-right-hover.svg");
}
.hl-block {
cursor: pointer;
padding: 0 20px;
}
.h-wrap-sub-menu {
visibility: hidden;
opacity: 0;
position: absolute;
width: 829px;
top: -29px;
left: 273px;
height: 100%;
z-index: 1111;
box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.5);
transition: transform 0.2s, visibility 0.2s linear,opacity 0.2s linear;
}
.hl-item:hover > .h-wrap-sub-menu {
visibility: visible;
opacity: 1;
transform: translateY(-16px);
transition-delay: 0.1s;
}
.header-wrap {
overflow: hidden;
}
.header-wrap:hover {
position: absolute;
width: 274px;
height: auto;
overflow: visible;
}
.h-sub-menu {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
display: flex;
overflow-y: auto;
height: 100%;
}
.h-sub-menu-grid {
display: grid;
grid-template-columns: 33.3% 33.3% 33.3%;
}
.h-sub-menu-grid a {
font-size: 14px;
padding-bottom: 5px;
display: block;
}
.h-title-small {
margin-top: 17px;
font-weight: bold;
padding-bottom: 10px;
font-size: 14px;
}
.h-sub-menu-divider {
padding: 0;
margin-top: 10px;
margin-bottom: 15px;
}
.h-sub-menu-block {
padding: 32px 56px 32px 40px;
}
.hl-item .h-sub-menu .h-title-small {
display: flex;
align-items: center;
}
/* color */
.header-wrap {
background: #fff;
}
.header-slider-button {
color: #fff;
}
.h-sub-menu {
background: #ffffff;
}
.hl-item:hover .hl-item-title {
color: blue;
}
.hl-item:hover .h-sub-menu a:hover:not(a.btn){
color: blue;
}
.h-sub-menu a,
.h-sub-menu span,
.head-text,
.hl-item-title,
.hl-item .h-sub-menu .h-title-small{
color: #000;
}
/* init */
.header-home {
display: grid;
grid-template-columns: minmax(0, 274px) minmax(0, 831px);
}
.flex {
display: flex;
}
.align-items-center {
align-items: center;
}
.width-100 {
width: 100%;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.