CSS子菜單z-index問題。顯示在主菜單後面

Question

我有一個客戶想要帶有下拉式子菜單的程式化菜單，但我無法在子菜單上顯示子菜單。

我知道這個問題以前已經解決過了，我已經嘗試了很多解決方案無濟於事。我試圖設置所有的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>

Answer 1

不少transform屬性（如rotate，您正在使用）創造轉型視口。這會影響轉換元素的所有子項，包括position:fixed。

除了其他效果，此視口創建一個堆疊上下文。
這意味着孩子們擁有自己的z-index空間，該空間恰好呈現在其父母的呈現位置。無論您爲孩子設置了什麼樣的z-index，任何呈現在父代上方的元素都將呈現在它們的上方（例如，一個元素的父代爲z-index，但後來在DOM中）。

爲了讓它們高於其餘，您需要在徘徊時更改其父項的z-index。在你的情況下，通過使用：

#header nav ul li:hover { 
    z-index: 6; 
}