Z-Index is "not working" - html

Question

I'm learning HTML and CSS and have some problems. Thare are 3 html elements.
First one is navigation bar.
Seconde one is button in that navigation.
Third one is dropdown menu.
Basicly, i wont on hover of 2nd element slide down 3th one.
And i get that. Problem is 3th element when sliding down it appears OVER 1st and 2nd. element. With opacity 0.99 i managed to slid it UNDER element 2. But its still OVER element 1.
How can i put it under all. Is it possible?
Here is example of my code. https://jsfiddle.net/eth66zea/
.su-drop {
position: absolute;
left: 0px;
top: -100px;
height: 100px;
min-width: 200px;
background-color: greenyellow;
transition: all 0.333s;
z-index: -1;
display: inline;
opacity: 0.99
}
.su-header {
position: relative;
height: 70px;
color: white;
background-color: black;
border-bottom: 2px #1f7caf solid;
margin-bottom: 10px;
z-index: 5;
}
.su-header .su-ul {
position: relative;
list-style-type: none;
font-size: 16px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10%;
}
.su-header .su-ul .su-li{
position: relative;
float: left;
padding: 10px 10px;
line-height: 50px;
min-width: 100px;
text-align: center;
transition: all 0.6s;
cursor: pointer;
display: inline;
}
.su-header .su-ul .su-li:hover{
background-color: #1f7caf;
}
.su-header .su-li:last-child:hover > .su-drop{
top: 70px;
}
<div class="su-header">
<ul class="su-ul">
<li class="su-li"><i class="fa fa-heartbeat" aria-hidden="true"></i></li>
<li class="su-li">Test1</li>
<li class="su-li">Test2</li>
<li class="su-li">
Dropdown
<div class="su-drop"></div>
</li>
</ul>
</div>
Thx for your help.

Answer 1

Here is one way of doing it that gets around the z-index problem.
Instead of doing the transition on the top offset, you can try doing the transition on the height value.
Position the .su-drop element where you need it (bottom of .su-li) and give it an initial height of 0. On hover, you then set the height to the desired value.
If you want the sliver of color at the top, you would need to add a second element, .su-drop-up, but this may be optional.
If you don't have a height value for .su-drop, then you might need to alter your HTML, it all depends on the details of your layout and design.
.su-drop {
position: absolute;
left: 0px;
bottom: 0px;
height: 0px;
min-width: 200px;
background-color: greenyellow;
transition: all 0.333s;
z-index: -1;
display: inline;
opacity: 0.97
}
.su-drop-up {
position: absolute;
left: 0px;
top: -10px;
height: 10px;
min-width: 200px;
background-color: greenyellow;
transition: all 0.333s;
z-index: -1;
display: inline;
opacity: 0.97
}
.su-header {
position: relative;
height: 70px;
color: white;
background-color: black;
border-bottom: 2px #1f7caf solid;
margin-bottom: 10px;
z-index: 5;
opacity: 1;
}
.su-header .su-ul {
position: relative;
list-style-type: none;
font-size: 16px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10%;
opacity: 0.98;
}
.su-header .su-ul .su-li {
position: relative;
float: left;
padding: 10px 10px;
line-height: 50px;
min-width: 100px;
text-align: center;
transition: all 0.6s;
cursor: pointer;
display: inline;
}
.su-header .su-ul .su-li:hover {
background-color: #1f7caf;
}
.su-header .su-li:last-child:hover > .su-drop {
height: 100px;
bottom: -100px;
}
.su-header .su-li:last-child:hover > .su-drop-up {
height: 0px;
}
<div class="su-header">
<ul class="su-ul">
<li class="su-li"><i class="fa fa-heartbeat" aria-hidden="true"></i>
</li>
<li class="su-li">Test1</li>
<li class="su-li">Test2</li>
<li class="su-li">
Dropdown
<div class="su-drop-up"></div>
<div class="su-drop"></div>
</li>
</ul>
</div>

Answer 2

Change your Height Property
.su-drop {
position: absolute;
left: 0px;
top:70px;
height: 0px;
min-width: 200px;
background-color: greenyellow;
transition: all 0.333s;
z-index: -1;
display: inline;
opacity: 0.97
}
.su-header .su-li:last-child:hover > .su-drop{
height:100px;
}
Working Demo https://jsfiddle.net/Rahul_Ravi/eth66zea/3/