CSS下拉菜单未应用Z索引

首先，我知道有一些问题与我的类似，这是一个重复的问题，但没有一个解决方案解决了我的问题。我不确定为什么会发生这种情况，但无论我做什么，我的下拉菜单都没有应用-1 z索引。本质上，如果我将鼠标悬停在元素结束的位置，它就会出现，因此它的z索引为10，就像标题一样。我不能包含更多的代码，因为如果我这样做，它将不允许我发布任何内容，但标题的位置是绝对的，z索引是10

编辑：再次解释我知道存在类似问题和/或重复问题，但没有一个问题解决了我的问题。

HTML

保险商实验室{
浮动：对；
列表样式：无；
@包括clearfix；
li.菜单项{
浮动：左；
位置：相对位置；
z指数：10；
&.当前菜单项，
&.当前页面项目，
&：悬停{
a{
颜色：$粉红色；
}
}
&.下拉项{
.图标容器{
显示：内联块；
转换：所有.2易入易出；
变换：旋转（0）；
左边距：5px；
我{
字体大小：1.8rem；
}
}
&：悬停{
.图标容器{
变换：旋转（180度）；
}
.下拉菜单{
不透明度：1；
变换：translateY（0）；
z指数：0；
}
}
下拉菜单{
位置：绝对位置；
z指数：-1！重要；
不透明度：0；
变换：translateY（50px）；
转换：所有.2易入易出；
最小宽度：200px；
背景：灰色；
填充：10px 15px；
li.下拉链接{
底部边框：1px纯色$浅灰色；
垫底：5px；
&：最后一种{
边框底部：无；
填充底部：0；
}
&：悬停{
a{
颜色：$粉红色；
}
}
a{
显示：块；
字体系列：“Oswald”，无衬线；
字体重量：$中等；
颜色：$白色；
转换：所有.2易入易出；
文字装饰：无；
字号：2rem；
位置：相对位置；
&：：之后{
内容：无；
}
}
}
}
}
&：最后一个孩子{
a{
&：：之后{
内容：无；
}
}
}
a{
显示：块；
字体系列：“Oswald”，无衬线；
字体重量：$中等；
颜色：$白色；
转换：所有.2易入易出；
文字装饰：无；
字号：2rem；
填充：10px 16px；
位置：相对位置；
&：：之后{
内容：''；
显示：块；
位置：绝对位置；
高度：5px；
宽度：5px；
背景：白色；
右：-2px；
最高：50%；
变换：translateY（-50%）旋转（45度）；
}
}
}
}

这是因为它采用父z索引。真的没办法。当你将鼠标悬停在它“应该”的位置时，它之所以会显示，是因为它就在那里。将某个对象的不透明度设置为0时，会保留该对象，但会使其不可见

您要做的是在可见性：隐藏和可见性：可见之间切换。这样，您就不会仅仅使用z索引和不透明度来隐藏某些内容

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

---

可能的重复，如问题中所述，我知道这是重复的，但答案没有解决我的问题。啊，明白了！非常感谢。

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