Не могу понять как сделать так, что бы при на ведение на основное меню, когда вываливается доп. меню, сделать затемнение всего сайта, который находится ниже.
Спасибо всем кто поможет!!!
Вот код моего меню:
<nav class="menu">
<div class="container">
<ul class="topmenu">
<li><a href="" class="a">рекламная продукция</a>
<ul class="submenu">
<li><a href="">Визитки</a></li>
<li><a href="">Листовки</a></li>
<li><a href="">Многостраничные изделия</a></li>
<li><a href="">Плакаты</a></li>
<li><a href="">Упаковка</a></li>
<li><a href="">Конверты</a></li>
<li><a href="">Папки</a></li>
<li><a href="">Календари</a></li>
<li><a href="">Пакеты</a></li>
<li><a href="">Календарные сетки</a></li>
<li><a href="">СТР формы</a></li>
<li><a href="">Изделия нестандартных размеров</a></li>
</ul>
</li>
<li><a href="" class="a">картонная упаковка</a></li>
<li><a href="" class="a">флексо печать</a></li>
<!-- <li><a href="" class="a">Производственные мощности</a></li> -->
<li><a href="" class="a">контакты</a></li>
<li><a href="" class="a">о нас</a></li>
</ul>
</div>
</nav
.menu {
background: #184fa3;
/* text-align: center; */
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.topmenu {
justify-content: space-between;
flex-wrap: wrap;
display: flex;
flex-direction: row;
}
nav a {
display: block;
text-align: center;
text-decoration: none;
transition: .2s linear;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.active {
/* font-weight: bold; */
}
.topmenu > li {
text-align: center;
display: inline-block;
position: relative;
}
.topmenu > li > a {
width: 100%;
height: auto;
text-transform: uppercase;
color: #fff;
}
.a {
font-weight: 500;
padding: 15px 0;
}
.active:after, .submenu-link:after {
color: inherit;
}
.topmenu, .topmenu > li > a:hover {color: #fff;}
.submenu li a:hover {color: #DA1111}
.submenu {
position: absolute;
z-index: 5;
width: 300px;
border: 1px solid #184fa3;
box-sizing: border-box;
box-shadow: 0px 4px 5px rgba(1, 102, 174, 0.22);
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition: .3s ease-in-out;
}
.submenu li {position: relative; }
.submenu a {
background: #fff;
color: #1c1c1c;
text-align: left;
font-weight: 500;
font-size: 16px;
padding: 10px 20px;
}
.submenu .submenu {
position: absolute;
top: 0;
}
nav li:hover > .submenu {
visibility: visible;
opacity: 1;
transform: translateY(0px);
}
Простой
