CSS boxshadow不重叠下拉菜单

Question

我用CSS创建了发光效果。当我将鼠标悬停在它上面时，它工作得非常好，它重叠在身体上。但是当我尝试使用下拉菜单时，它不会与下拉菜单重叠。我以为这是因为z-index的缘故，所以我为下拉菜单z-index:1;和导航栏z-index:2;添加了代码，但不幸的是这没有用。有人可以帮助我吗？

实时演示：

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

Answer 1

结果证明解决方案非常简单

您只需要在此处更改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>