0

Есть 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>

jsfieddle

1
  • нормально всё вроде бы ... и смотрится хорошо, за исключением вашего чёрного фона ... который портит зрение
    – user33274
    Commented 29 мар. 2018 в 6:23

1 ответ 1

0

.third-ul является потомком .second-ul, а потому всегда будет выше родителя. Как вариант в Вашей ситуации - попробуйте сдвинуть тень.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.