Есть 3х-уровневое меню.
Пункты меню имеют свойство z-index:3
При наведении на пункт выпадает второй уровень меню, при наведении на пункт второго уровня меню выпадает третий уровень. Все уровни дочерние, 2 и 3 уровни имеют тень box-shadow
Проблема в том, что тень 3-го уровня почему-то перекрывает второй уровень меню, то есть получается почему-то 3 уровень выше 2 уровня. Не получается сделать так чтобы 2 и 3 уровни были на одном слое(имели одинаковый z-index) и тогда тени будут за уровнями как положено.
//выпадающее меню
$('.drop-down, .drop-down-2').hover(function() {
$(this).find('ul').eq(0).fadeIn(300);
}, function() {
$(this).find('ul').fadeOut(300);
});
/* Менюшка */
body {
background: #000
}
header ul {
margin: 17px 0 0 0
}
.first-ul li:first-child {
margin: 0
}
.first-ul li:last-child {
padding: 0 0 10px
}
.first-ul li {
display: inline-block;
font: 500 16px/normal 'Montserrat', san-serif;
letter-spacing: 1px;
margin: 0 0 0 89px;
padding: 0 0 10px;
transition: .3s;
border-bottom: 3px solid transparent;
z-index: 3;
position: relative;
}
.first-ul li:hover {
border-bottom-color: #ffcc00
}
.first-ul li a {
padding-bottom: 43px
}
header ul li a,
header ul li a:hover {
color: #fff
}
.second-ul,
.third-ul {
display: none;
position: absolute;
background: #fff;
box-shadow: 0 11px 43px 0 rgba(0, 0, 0, 0.8);
border-radius: 5px;
min-width: 248px;
width: auto;
padding: 16px 0;
letter-spacing: 0;
z-index: 2;
}
.second-ul {
left: 0;
top: 100%;
margin: 22px auto 0
}
.drop-down sup {
background: url(../img/arrow-down.png)no-repeat;
margin: 7px 0 0 10px;
float: right;
width: 8px;
height: 5px;
vertical-align: middle;
transform: rotate(0deg);
transition: .3s
}
.drop-down:hover sup {
transform: rotate(180deg);
margin: 7px 0 0 10px
}
.second-ul li {
margin: 0;
padding: 11px 15px 11px 28px;
display: block;
text-transform: none;
font: 400 14px/normal 'Montserrat', san-serif
}
.second-ul li:last-child {
padding: 11px 15px 11px 28px;
margin: 0
}
.second-ul li.drop-down-2 sup {
background: url(../img/arrow-right.png)no-repeat;
position: absolute;
top: 0;
bottom: 0;
right: 20px;
width: 5px;
height: 8px;
margin: auto;
transform: rotate(0deg);
transition: .3s
}
.second-ul li.drop-down-2:hover sup {
transform: rotate(180deg)
}
.second-ul li:hover {
background: #f7f7f7
}
.second-ul li a,
.second-ul li a:hover,
.third-ul li a,
.third-ul li a:hover {
color: #090b44;
padding: 0
}
.second-ul li:hover,
.third-ul li:hover {
border-bottom-color: transparent
}
.third-ul {
left: 100%;
margin: 0;
top: -16px;
margin-left: 3px
}
.third-ul:before {
content: '';
position: absolute;
left: -3px;
top: 0;
width: 3px;
height: 100%;
background: transparent
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<ul class="first-ul">
<li class="drop-down"><a href="catalog.php">каталог</a><sup></sup>
<ul class="second-ul">
<li class="drop-down-2"><a href="batteries-of-fireworks.php">Батареи салютов</a><sup></sup>
<ul class="third-ul">
<li><a href="#">до 2000 руб.</a></li>
<li><a href="#">от 2000 до 5000 руб.</a></li>
<li><a href="#">от 5000 до 10000 руб.</a></li>
<li><a href="#">от 10000 руб. (суперсалюты)</a></li>
</ul>
</li>
<li><a href="roman-candles.php">Римские свечи</a></li>
<li class="drop-down-2"><a href="fountains.php">Фонтаны</a><sup></sup>
<ul class="third-ul">
<li><a href="#">до 2000 руб.</a></li>
<li><a href="#">от 2000 до 5000 руб.</a></li>
<li><a href="#">от 5000 до 10000 руб.</a></li>
<li><a href="#">от 10000 руб. (суперфонтаны)</a></li>
</ul>
</li>
<li class="drop-down-2"><a href="bengal-candles-and-petards">Бенгальские свечи<br /> и хлопушки</a><sup></sup>
<ul class="third-ul">
<li><a href="#">до 2000 руб.</a></li>
<li><a href="#">от 2000 до 5000 руб.</a></li>
<li><a href="#">от 5000 до 10000 руб.</a></li>
<li><a href="#">от 10000 руб. (суперхлопушки)</a></li>
</ul>
</li>
<li><a href="smoking-fireworks.php">Дымовые фейерверки</a></li>
<li><a href="goods.php">Изделия для пейнтбола и реконструкции</a></li>
</ul>
</li>
<li class="drop-down"><a href="company.php">о компании</a><sup></sup>
<ul class="second-ul">
<li><a href="about.php">О нас</a></li>
<li><a href="testimonials.php">Отзывы</a></li>
<li><a href="news.php">Новости</a></li>
<li><a href="faq.php">FAQ</a></li>
</ul>
</li>
</ul>
<div class="itGoesDown"><span class="quality">качественная</span>
<h1>пиротехника в рязани</h1>
<p>Работаем с 1994 года</p>
</div>
</header>