Выпадающее меню 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-индекс.Там действительно нет никакого способа обойти это.Причина, по которой он отображается при наведении на то место, где он «должен» быть, заключается в том, что он там.Придавая непрозрачность 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);
            }
        }
    }
}