Есть навигационная панель. Суть задачи такая - при наведении на ссылку в навигационной панели должен выезжать блок - этого я добился, но как сделать так, чтобы блок не исчезал и можно было водить по нему мышкой и нажимать внутренние ссылки?
.header-menu-sub {
position: absolute;
width: 788px;
height: 200px;
display: none;
}
a:hover+.header-menu-sub {
background-color: white;
display: block;
}
<nav class="navbar navbar-expand-lg header-menu">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerMenu" aria-controls="navbarTogglerMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerMenu">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item has-sub">
<a class="nav-link " href="#">О компании</a>
<!--Скрытый блок, который показывается при наведении-->
<div class="header-menu-sub">
<div class="header-menu-title">О компании</div>
<div class="row">
<div class="col-md-4">Меню</div>
<div class="col-md-8">Контент</div>
</div>
</div>
<!--Конец скрытого блока-->
</li>
</ul>
</div>
</nav
Решено.
.header-menu-sub {
position: absolute;
width: 788px;
height: 200px;
opacity:0;
-webkit-transition: opacity 0.5s ease-out 0.1s;
-moz-transition: opacity 0.5s ease-out 0.1s;
-o-transition: opacity 0.5s ease-out 0.1s;
transition: opacity 0.5s ease-out 0.1s;
z-index: 2;
visibility: hidden;
}
a:hover+.header-menu-sub, .header-menu-sub:hover {
background-color: white;
opacity:1;
visibility: visible;
}