CSS下拉菜單不應用Z-Index

Question

首先，我知道有些問題與我的相似，這是重復的問題，但是沒有一種解決方案可以解決我的問題。 我不確定為什么會這樣，但是無論我做什么，我的下拉菜單都不會應用-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);
                }
            }
        }
    }

Answer 1

這是因為它采用父z-index。 真的沒有辦法解決這個問題。 當您將鼠標懸停在其“應該”位於的位置時，顯示它的原因是因為它在那里。 給某個東西的不透明度為0，留在原處...但使其不可見。

您要做的是在可見性：隱藏和可見性：可見之間切換。 這樣，您就不會只想使用z-index和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);
            }
        }
    }
}