CSS boxshadow not overlapping dropdown - html

Question

My problem
I made a glow effect with css when I hover over something in my navbar, but when I hover my mouse of the dropdown in my navbar the glow doesn't overlap the dropdown.
I tried
Adding z-index:1; to the dropdown and z-index:2; for the navbar
demo:
https://codepen.io/nemoko/pen/NWGybdy

Answer 1

Turns out the solution was quite simple
You just needed to change the z-index here:
.navbar .navbar-dropdown-content{
top: 100%;
margin: 0;
display: none;
position: absolute;
font-size: 0.8em;
background-color: rgb(0, 0, 0);
z-index:-1;
}
body{
background-color: grey;
}
/* Navigation bar */
.navbar {
background-color: rgb(0, 0, 0);
height: 3.5em;
width: 100%;
position: fixed;
top: 0;
z-index: 2;
}
.navbar .navbar-links {
font-size: 2em;
border: none;
outline: none;
float: right;
margin: 0.25em 2em 0 0;
color: white;
text-decoration: none;
background-color: inherit;
font-family: inherit;
transition: ease-in-out 0.5s;
}
.navbar .navbar-links:hover {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #03a9f4, 0 0 30px #03a9f4, 0 0 40px #03a9f4, 0 0 55px #03a9f4, 0 0 75px #03a9f4;
}
.navbar .navbar-dropdown{
float: right;
width: 14.7em;
height: 100%;
z-index:1;
}
.navbar .navbar-dropdown-content{
top: 100%;
margin: 0;
display: none;
position: absolute;
font-size: 0.8em;
background-color: rgb(0, 0, 0);
z-index:-1;
}
.navbar .navbar-dropdown-content a{
float: none;
padding: 12px 16px;
display: block;
}
.navbar .navbar-dropdown:hover .navbar-dropdown-content{
display: block;
}
.navbar .navbar-dropdown:hover .navbar-dropbtn{
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #03a9f4, 0 0 30px #03a9f4, 0 0 40px #03a9f4, 0 0 55px #03a9f4, 0 0 75px #03a9f4;
}
<div class="navbar">
Twotter
<div class="navbar-dropdown">
<button class="navbar-dropbtn navbar-links">
test test
<i class="fa fa-caret-down"></i>
</button>
<div class="navbar-dropdown-content">
Profiel
Admin panel
</div>
</div>
</div>