CSS тень окна не перекрывает раскрывающийся список - PullRequest
Новая
       35

CSS тень окна не перекрывает раскрывающийся список

0 голосов
/ 06 мая 2020

Я создал эффект свечения с помощью css. он отлично работает, когда я наводю на него курсор, он накладывается на тело. но когда я пробую использовать раскрывающийся список, он не перекрывает раскрывающийся список. Я думал, что это из-за z-индекса, поэтому я добавил для раскрывающегося списка z-index:1; и для панели навигации z-index:2;, но, к сожалению, это не сработало. может кто-нибудь мне помочь?

живая демонстрация:

https://codepen.io/nemoko/pen/NWGybdy

1 Ответ

1 голос
/ 06 мая 2020

Оказывается, решение было довольно простым

Вам просто нужно было изменить здесь z-index: 

.navbar .navbar-dropdown-content{
    top: 100%;
    margin: 0;
    display: none;
    position: absolute;
    font-size: 0.8em;
    background-color: rgb(0, 0, 0);
    z-index:-1;
}


body{
  background-color: grey;
}  
/* Navigation bar */
    .navbar {
        background-color: rgb(0, 0, 0);
        height: 3.5em;
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 2;
    }
    
    .navbar .navbar-links {
        font-size: 2em;
        border: none;
        outline: none;
        float: right;
        margin: 0.25em 2em 0 0;
        color: white;
        text-decoration: none;
        background-color: inherit;
        font-family: inherit;
        transition: ease-in-out 0.5s;
    }
    
    .navbar .navbar-links:hover {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #03a9f4, 0 0 30px #03a9f4, 0 0 40px #03a9f4, 0 0 55px #03a9f4, 0 0 75px #03a9f4;
    }

    .navbar .navbar-dropdown{
        float: right;
        width: 14.7em;
        height: 100%;
        z-index:1;
    }

    .navbar .navbar-dropdown-content{
        top: 100%;
        margin: 0;
        display: none;
        position: absolute;
        font-size: 0.8em;
        background-color: rgb(0, 0, 0);
        z-index:-1;
    }

    .navbar .navbar-dropdown-content a{
        float: none;
        padding: 12px 16px;
        display: block;
    }

    .navbar .navbar-dropdown:hover .navbar-dropdown-content{
        display: block;
    }
    .navbar .navbar-dropdown:hover .navbar-dropbtn{
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #03a9f4, 0 0 30px #03a9f4, 0 0 40px #03a9f4, 0 0 55px #03a9f4, 0 0 75px #03a9f4;
    }
        <div class="navbar">
            <a href="index.php" id="Logo" class="navbar-links" style="float:left; margin-left:3em;">Twotter</a>
            <div class="navbar-dropdown">
                <button class="navbar-dropbtn navbar-links">
                    test test
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="navbar-dropdown-content">
                    <a href="profile.php" id="Contacting" class="navbar-links">Profiel</a>
                    <a href="Admin.php" id="Contacting" class="navbar-links">Admin panel</a>

                </div>
            </div>
        </div>
...