Проблемы с z-index в подменю CSS. Отображение за главным меню

У меня есть клиент, который хочет стилизованное меню с выпадающими подменю, но я не могу заставить подменю отображаться над основным меню.

Я знаю, что это было рассмотрено ранее, и я пробовал много решений безрезультатно. Я попытался установить все z-индексы в логической последовательности и установить z-индекс подменю на -1, но безрезультатно.

Ниже моя страница codepen. Любая помощь будет здорово.

https://codepen.io/h2onet/pen/ZpLzjb

#header {
  z-index: 1;
}
#header nav {
  display: block;
  z-index: 2;
}
#header nav ul {
  height: 292px;
  background: green;
  position: relative;
  z-index: 3;
}
#header nav ul li {
  display: block;
  position: relative;
  z-index: 4;
}
#header nav ul a {
  color: white;
  text-shadow: 2px 2px 4px #000000;
  z-index: 5;
}
#header nav ul a:hover {
  color: #0ff;
}
#header nav ul ul {
  background: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 6;
}
#header nav ul li ul {
  position: absolute;
  width: 210px;
  left: -999em;
}
#header nav ul li:hover ul {
  left: auto;
  margin: 0;
}
#header nav ul ul li {
  width: 210px;
  background: red;
  text-align: left;
  display: block;
  z-index: 7;
}
#header nav ul ul li a {
  text-decoration: none;
  padding: 7px 3px 5px 23px;
  line-height: 1.5em;
}
#header nav ul ul li a:hover {
  background: #5a604f;
  margin: 0;
}
/* BELOW IS CSS TO ABSOLUTELY POSITION LINKS PER CLIENTS SPECS */

#header nav ul li.primary:nth-of-type(1) {
  position: absolute;
  top: 180px;
  left: 70px;
  -ms-transform: rotate(-2deg);
  /* IE 9 */
  -webkit-transform: rotate(-2deg);
  /* Chrome, Safari, Opera */
  transform: rotate(-2deg);
}
#header nav ul li.primary:nth-of-type(2) {
  position: absolute;
  top: 185px;
  left: 150px;
  -ms-transform: rotate(0deg);
  /* IE 9 */
  -webkit-transform: rotate(0deg);
  /* Chrome, Safari, Opera */
  transform: rotate(0deg);
}
#header nav ul li.primary:nth-of-type(2) a {
  font-size: 55%;
}
#header nav ul li.primary:nth-of-type(3) {
  position: absolute;
  top: 183px;
  left: 235px;
  -ms-transform: rotate(1deg);
  /* IE 9 */
  -webkit-transform: rotate(1deg);
  /* Chrome, Safari, Opera */
  transform: rotate(1deg);
}
#header nav ul li.primary:nth-of-type(3) a {
  font-size: 85%;
}
#header nav ul li.primary:nth-of-type(4) {
  position: absolute;
  top: 165px;
  left: 360px;
  -ms-transform: rotate(-9deg);
  /* IE 9 */
  -webkit-transform: rotate(-9deg);
  /* Chrome, Safari, Opera */
  transform: rotate(-9deg);
}
#header nav ul li.primary:nth-of-type(5) {
  position: absolute;
  top: 215px;
  left: 40px;
  width: 120px;
  -ms-transform: rotate(0deg);
  /* IE 9 */
  -webkit-transform: rotate(0deg);
  /* Chrome, Safari, Opera */
  transform: rotate(0deg);
}
#header nav ul li.primary:nth-of-type(5) a {
  font-size: 55%;
  word-spacing: 9999999px;
}
#header nav ul li.primary:nth-of-type(6) {
  position: absolute;
  top: 220px;
  left: 160px;
  -ms-transform: rotate(-2deg);
  /* IE 9 */
  -webkit-transform: rotate(-2deg);
  /* Chrome, Safari, Opera */
  transform: rotate(-2deg);
}
#header nav ul li.primary:nth-of-type(6) a {
  font-size: 80%;
}
#header nav ul li.primary:nth-of-type(7) {
  position: absolute;
  top: 230px;
  left: 290px;
  -ms-transform: rotate(-3deg);
  /* IE 9 */
  -webkit-transform: rotate(-3deg);
  /* Chrome, Safari, Opera */
  transform: rotate(-3deg);
}
#header nav ul li.primary:nth-of-type(7) a {
  font-size: 65%;
}
#header nav ul li.primary:nth-of-type(8) {
  position: absolute;
  top: 240px;
  left: 350px;
  -ms-transform: rotate(-3deg);
  /* IE 9 */
  -webkit-transform: rotate(-3deg);
  /* Chrome, Safari, Opera */
  transform: rotate(-3deg);
}
#header nav ul li.primary:nth-of-type(8) a {
  font-size: 60%;
}
#header nav ul li.primary:nth-of-type(9) {
  position: absolute;
  top: 210px;
  left: 460px;
  -ms-transform: rotate(-1deg);
  /* IE 9 */
  -webkit-transform: rotate(-1deg);
  /* Chrome, Safari, Opera */
  transform: rotate(-1deg);
}
#header nav ul li.primary:nth-of-type(9) a {
  font-size: 60%;
}
#header nav ul li.primary:nth-of-type(10) {
  position: absolute;
  top: 205px;
  left: 360px;
  -ms-transform: rotate(-4deg);
  /* IE 9 */
  -webkit-transform: rotate(-4deg);
  /* Chrome, Safari, Opera */
  transform: rotate(-4deg);
}
#header nav ul li.primary:nth-of-type(10) a {
  font-size: 65%;
}
<header id="header">
  <nav>
    <ul>
      <li class="primary"><a href="/">HOME</a>
      </li>
      <li class="primary current"><a href="/" current>LINK 2</a>
      </li>
      <li class="primary"><a href="/">HOVER THIS LINK</a>
        <ul>
          <li><a href="/">SUBLINK 1</a>
          </li>
          <li><a href="/">SUBLINK 2</a>
          </li>
          <li><a href="/">SUBLINK 3</a>
          </li>
          <li><a href="/">SUBLINK 4</a>
          </li>
        </ul>
      </li>
      <li class="primary"><a href="/">LINK 3</a>
      </li>
      <li class="primary"><a href="/">LINK 4</a>
      </li>
      <li class="primary"><a href="/">LINK 5 OVERLAP</a>
      </li>
      <li class="primary"><a href="/">LINK 6 OVERLAP</a>
      </li>
      <li class="primary"><a href="/">LINK 7</a>
      </li>
      <li class="primary"><a href="/">LINK 8</a>
      </li>
      <li class="primary"><a href="/">LINK 9</a>
      </li>
    </ul>
  </nav>
</header>


css z-index submenu
person Dan Manson    schedule 21.09.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Довольно много свойств transform (например, rotate, которое вы используете) создают область просмотра для преобразования. Это влияет на все дочерние элементы преобразованного элемента, включая элементы с position:fixed.

Помимо других эффектов, это окно просмотра создает контекст наложения.
Это означает, что у дочерних элементов есть собственное z-index пространство, которое отображается точно там же, где отображается их родитель. Любой элемент, который отображается над своим родителем, будет отображаться над ними (например, элемент с равным z-index в качестве родителя, но позже в DOM) независимо от того, какой z-index вы установите для дочерних элементов.

Чтобы отобразить их выше остальных, вам нужно изменить z-index их родителя при наведении курсора. В вашем случае, используя:

#header nav ul li:hover {
   z-index: 6;
}
person tao    schedule 21.09.2016
comment
СПАСИБО Андрей. Это исправило это. Люблю этот форум. - person Dan Manson; 22.09.2016