I have a problem that I cannot solve. There is a menu, you need to hover over one of the items to drop a mega-menu. This happens, but as soon as I try to move the cursor over this menu-menu, it disappears immediately.
The mega menu has a position: absolute, but this is always done, and everything works for everyone. I can't understand what the problem is
.menu__dropdown {
position: absolute;
z-index: 2;
padding: 22px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
pointer-events: none;
width: 100%;
left: 0;
transform: translateX(0);
background-color: rgba(37, 44, 55);
right: 0;
display: block;
top: 80px;
}
.menu__list li:hover>.menu__dropdown {
opacity: 1;
visibility: visible;
}
.header {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
min-height: 80px;
padding: 20px 0px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
background: rgba(37, 44, 55, 0);
}
.header ._container {
max-width: 1470px;
margin: 0 auto;
padding: 0 45px;
}
.header._active {
background: #252c37;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.header__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 0;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header__logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header__logo img {
width: 96px;
margin: 0px 20px 0px 0px;
}
.header__logo p {
width: 156px;
font-size: 12px;
line-height: 16px;
color: #fff;
}
.menu-opened {
max-width: 1440px;
}
.menu-opened._active {
position: fixed;
top: 80px;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 100%;
background: #64686F;
}
.menu-opened {
height: 100%;
height: 365px;
}
.menu-opened__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 0;
height: 365px;
}
.menu-opened__left {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
height: 100%;
}
.menu-opened__right {
-webkit-box-flex: 0;
-ms-flex: 0 0 407px;
flex: 0 0 407px;
background: url("../img/menu/bg.jpg") no-repeat;
background-size: cover;
border-radius: 10px 0 0 10px;
}
.menu__list li:hover>.menu__dropdown {
opacity: 1;
visibility: visible;
}
.menu__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 0;
}
.menu__list li {
margin: 0px 36px 0px 0px;
}
.menu__list li:last-child {
margin: 0;
}
.menu__link {
font-weight: 600;
font-size: 14px;
line-height: 16px;
color: #FFFFFF;
}
.menu__dropdown {
position: absolute;
z-index: 2;
padding: 22px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
pointer-events: none;
width: 100%;
left: 0;
transform: translateX(0);
background-color: rgba(37, 44, 55);
right: 0;
display: block;
top: 80px;
}<header class="header">
<div class="_container">
<div class="header__row">
<a href="/" class="header__logo">
<img src="img/logo.png" alt="">
<p>Программное обеспечение для сферы бытовых услуг</p>
</a>
<div class="header__menu menu">
<div class="menu__icon icon-menu">
<span></span>
<span></span>
<span></span>
</div>
<nav class="menu__body">
<ul class="menu__list">
<li><a href="nashi-avto.html" class="menu__link">Товары и цены</a></li>
<li class="">
<a href="#" class="menu__link _dropdown">Услуги</a>
<span class="menu__arrow"></span>
<div class="menu__dropdown">
<ul class="menu__sub-list">
<li><a href="#" class="menu__sub-link">Программный комплекс</a></li>
<ul class="menu__sub-sub-list">
<li><a href="#" class="menu__sub-sub-link">Химчистка</a></li>
<li><a href="#" class="menu__sub-sub-link">Приёмка</a></li>
<li><a href="#" class="menu__sub-sub-link">Приёмка</a></li>
<li><a href="#" class="menu__sub-sub-link">Рабочее Место</a></li>
<li><a href="#" class="menu__sub-sub-link">Цех</a></li>
<li><a href="#" class="menu__sub-sub-link">Рассылки</a></li>
<li><a href="#" class="menu__sub-sub-link">Клиент</a></li>
<li><a href="#" class="menu__sub-sub-link">Call-центр</a></li>
<li><a href="#" class="menu__sub-sub-link">Подпись</a></li>
<li><a href="#" class="menu__sub-sub-link"> Фото</a></li>
<li><a href="#" class="menu__sub-sub-link">Сканер</a></li>
</ul>
<li><a href="#" class="menu__sub-link">Мобильное приложение интегрированное</a></li>
<li><a href="#" class="menu__sub-link">Сайт интегрированный</a></li>
<li><a href="#" class="menu__sub-link">Дополнительные опции</a></li>
<li><a href="#" class="menu__sub-link">Автомат</a></li>
</ul>
</div>
</li>
<li><a href="#" class="menu__link">Поддержка</a></li>
<li><a href="#" class="menu__link">О нас</a></li>
<li><a href="#" class="menu__link">Информация</a></li>
<li><a href="#" class="menu__link">Контакты</a></li>
</ul>
</nav>
</div>
<a href="#" class="header__cart"></a>
<div class="header__contacts">
</div>
</div>
</div>
</header>