Dfyjkt

To start off, I know there are questions similar to mine and this is a repeated question, but none of the solutions have resolved my problem. I'm not sure why this is occurring, but my dropdown menu is not applying the -1 z-index no matter what I do. Essentially, if I hover over where the element ends up being, it just appears, so it has a z-index of 10, just like the header. I can't include anymore code because it won't let me post anything if I do that, but the header has a position of absolute and a z-index of 10.

Edit: Explaining again that I know there are similar questions and/or duplicate questions, but none have resolved my issue.

HTML

<ul>
 <li class="menu-item"><a href="#">HOME</a></li>
 <li class="menu-item"><a href="#">JOURNAL</a></li>
 <li class="menu-item dropdown-item">
 <a href="#">MEMBERS 
 <span class="icon-container">
 <i class="fas fa-chevron-down"></i>
 </span>
 </a>
 <ul class='dropdown-menu'>
 <li class="dropdown-link"><a href="#">Member 1</a></li>
 <li class="dropdown-link"><a href="#">Member 2</a></li>
 <li class="dropdown-link"><a href="#">Member 3</a></li>
 </ul>
 </li>
 <li class="menu-item"><a href="#">VIDEOS</a></li>
</ul>


ul 
 float: right;
 list-style: none;
 @include clearfix;
 li.menu-item 
 float: left;
 position: relative;
 z-index: 10;
 &.current-menu-item, 
 &.current_page_item,
 &:hover 
 a 
 color: $pink;
 
 
 &.dropdown-item 
 .icon-container 
 display: inline-block;
 transition: all .2s ease-in-out;
 transform: rotate(0);
 margin-left: 5px;
 i 
 font-size: 1.8rem;
 
 
 &:hover 
 .icon-container 
 transform: rotate(180deg);
 
 .dropdown-menu 
 opacity: 1;
 transform: translateY(0);
 z-index: 0;
 
 
 ul.dropdown-menu 
 position: absolute;
 z-index: -1 !important;
 opacity: 0;
 transform: translateY(50px);
 transition: all .2s ease-in-out;
 min-width: 200px;
 background: $grey;
 padding: 10px 15px;
 li.dropdown-link 
 border-bottom: 1px solid $light-grey;
 padding-bottom: 5px;
 &:last-of-type 
 border-bottom: none;
 padding-bottom: 0;
 
 &:hover 
 a 
 color: $pink;
 
 
 a 
 display: block;
 font-family: 'Oswald', sans-serif;
 font-weight: $medium;
 color: $white;
 transition: all .2s ease-in-out;
 text-decoration: none;
 font-size: 2rem;
 position: relative;
 &::after 
 content: none;
 
 
 
 
 
 &:last-child 
 a 
 &::after 
 content: none;
 
 
 
 a 
 display: block;
 font-family: 'Oswald', sans-serif;
 font-weight: $medium;
 color: $white;
 transition: all .2s ease-in-out;
 text-decoration: none;
 font-size: 2rem;
 padding: 10px 16px;
 position: relative;
 &::after 
 content: '';
 display: block;
 position: absolute;
 height: 5px;
 width: 5px;
 background: $white;
 right: -2px;
 top: 50%;
 transform: translateY(-50%) rotate(45deg);
 
 
 
 

This is because it takes on the parent z-index. There's really no way around this. The reason why it is displaying when you hover where it's "supposed" to be, is because it's there. Giving something an opacity of 0, leaves in in place...but makes it invisible.

What you want to do is toggle between visibility: hidden and visibility: visible. This way you aren't tying to just hide something using z-index and opacity.

ul 
 float: right;
 list-style: none;
 @include clearfix;
 li.menu-item 
 float: left;
 position: relative;
 z-index: 10;
 &.current-menu-item, 
 &.current_page_item,
 &:hover 
 a 
 color: $pink;
 
 
 &.dropdown-item 
 .icon-container 
 display: inline-block;
 transition: all .2s ease-in-out;
 transform: rotate(0);
 margin-left: 5px;
 i 
 font-size: 1.8rem;
 
 
 &:hover 
 .icon-container 
 transform: rotate(180deg);
 
 .dropdown-menu 
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
 z-index: 0;
 
 
 ul.dropdown-menu 
 position: absolute;
 opacity: 0;
 visibility: hidden;
 transform: translateY(50px);
 transition: all .2s ease-in-out;
 min-width: 200px;
 background: $grey;
 padding: 10px 15px;
 li.dropdown-link 
 border-bottom: 1px solid $light-grey;
 padding-bottom: 5px;
 &:last-of-type 
 border-bottom: none;
 padding-bottom: 0;
 
 &:hover 
 a 
 color: $pink;
 
 
 a 
 display: block;
 font-family: 'Oswald', sans-serif;
 font-weight: $medium;
 color: $white;
 transition: all .2s ease-in-out;
 text-decoration: none;
 font-size: 2rem;
 position: relative;
 &::after 
 content: none;
 
 
 
 
 
 &:last-child 
 a 
 &::after 
 content: none;
 
 
 
 a 
 display: block;
 font-family: 'Oswald', sans-serif;
 font-weight: $medium;
 color: $white;
 transition: all .2s ease-in-out;
 text-decoration: none;
 font-size: 2rem;
 padding: 10px 16px;
 position: relative;
 &::after 
 content: '';
 display: block;
 position: absolute;
 height: 5px;
 width: 5px;
 background: $white;
 right: -2px;
 top: 50%;
 transform: translateY(-50%) rotate(45deg);