首先，我知道存在与我的问题类似的问题，这是重复的问题，但是没有一种解决方案可以解决我的问题。我不确定为什么会这样，但是无论我做什么，我的下拉菜单都不会应用-1 z-index。本质上，如果我将鼠标悬停在元素的最终位置，它就会出现，因此它的z索引为10，就像标题一样。我不能再包含任何代码，因为如果这样做，它将不允许我发布任何内容，但是标头的位置是绝对位置，z索引的位置是10。
编辑：再次说明我知道有类似的问题和/或重复的问题，但没有一个解决了我的问题。
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);
}
}
}
}
答案 0 :(得分：1)
这是因为它采用父z-index。真的没有办法解决这个问题。当您将鼠标悬停在其“应该”位于的位置时，显示它的原因是因为它在那里。赋予不透明度为0的内容，保留原位...但使其不可见。
您要做的是在可见性：隐藏和可见性：可见之间切换。这样，您就不会只想使用z-index和不透明度来隐藏某些东西。
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);
}
}
}
}