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);
}
}
}
}