Z-Index - L'enfant n'ira pas au-dessous du parent

Question

J'ai un problème avec Z-index.

Je suis en train de construire un menu déroulant, lorsque vous passez la souris sur l'élément de la liste, il affiche le sous-menu déroulant. Je veux qu'il commence à partir de l'écran autour de -400px puis la liste déroulante, mais je ne veux pas qu'il soit au-dessus de l'en-tête rouge quand il baisse et glisser vers le haut.

Comment puis-je obtenir la liste déroulante sous l'en-tête rouge afin qu'elle apparaisse directement sous l'élément de liste sur le fond gris?

Merci

html, 
 
body, 
 
ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    background: #f8f8f8; 
 
} 
 

 
header { 
 
    position: relative; 
 
    z-index: 20; 
 
    background: red; 
 
} 
 

 
.list-item { 
 
    position: relative; 
 
    padding: 10px 0; 
 
} 
 

 
.list-item:hover .sub-dropdown { 
 
    /*top: 100%;*/ 
 
    /*visibility: visible; 
 
       opacity: 1;*/ 
 
} 
 

 
.sub-dropdown { 
 
    position: absolute; 
 
    top: -10px; 
 
    /*visibility: hidden; 
 
       opacity: 0;*/ 
 
    /*transition: 0.25s;*/ 
 
    z-index: -10; 
 
}

<header> 
 
    <ul> 
 
    <li class="list-item"> 
 
     <a href="#">Link 1</a> 
 
     <ul class="sub-dropdown"> 
 
     <li><a href="">Sub Link 1</a></li> 
 
     <li><a href="">Sub Link 2</a></li> 
 
     <li><a href="">Sub Link 3</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</header>

https://jsfiddle.net/ufgqsw95/1/

Answer 1

Le sous-menu déroulant a besoin d'un indice de z-1 et la liste de l'article a besoin d'un z-index de 1.

.list-item { 
    position: relative; 
    padding: 10px 0; 
    z-index: 1; 
} 

.sub-dropdown { 
    position: absolute; 
    top: -60px; 
    z-index: -1; 
} 

Ensuite, sur: hover, vous pouvez donner e le sous-menu déroulant en haut: 100%.

.list-item:hover .sub-dropdown { 
    top: 100%; 
} 

Est-ce le résultat souhaité: https://jsfiddle.net/ufgqsw95/2/?

Answer 2

Est-ce ce que vous cherchez? J'ai enlevé l'index z.

html, 
 
body, 
 
ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    background: #f8f8f8; 
 
} 
 

 
header { 
 
    background: red; 
 
} 
 

 
.list-item { 
 
    position: relative; 
 
    padding: 10px 0; 
 
} 
 

 
.list-item:hover .sub-dropdown { 
 
    animation: showsub 0.5s forwards; 
 
} 
 

 
.sub-dropdown { 
 
    position: absolute; 
 
    top: -400px; 
 
    z-index: -1; 
 
} 
 

 
@keyframes showsub { 
 
    0% { 
 
    top: -400px; z-index: -1; 
 
    } 
 
    50% { 
 
    top: 0; z-index: -1; 
 
    } 
 
    100% { 
 
    top: 100%; z-index: 0; 
 
    }

<header> 
 
    <ul> 
 
    <li class="list-item"> 
 
     <a href="#">Link 1</a> 
 
     <ul class="sub-dropdown"> 
 
     <li><a href="">Sub Link 1</a></li> 
 
     <li><a href="">Sub Link 2</a></li> 
 
     <li><a href="">Sub Link 3</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</header>

Answer 3

Vous pouvez l'utiliser, pas besoin de Z-index.

.list-item:hover .sub-dropdown {top: 100%;display:block;} 
.sub-dropdown {position: absolute;display:none;}