0

我想在我的导航栏中做一个下拉菜单，但它总是被样式中的背景图像挡住。位置设置为绝对，因为如果我将其设置为相对，导航栏的高度也会增加。我希望它看起来或多或少像 w3 关于 dropdows 的教程https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizo ​​ntal_black_fixed

这是html代码

<!DOCTYPE html>

    <html>
    
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap html_test2.css" rel="stylesheet">
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="Yearbook">
        <meta name="keywords" content="yearbook">
        <meta name="author" content="Gerald">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <style>
    
            body{
                margin: 0px;
                background: linear-gradient(45deg, #5fd5f3, #ffddc6);
                  background-size: 500% 1000%;
                  animation: gradient 10s ease infinite;
            }
                @keyframes gradient {
                    0% {
                        background-position-x: 0%;
                    }
                    50% {
                        background-position-x: 100%;
                    }
                    100% {
                        background-position-x: 0%;
                        }
                    }
        </style>
    </head>
    
    <body>
        <div class="navbar">
            <ul>
                <li><a>Contacts</a>
                    <ul>
                        <li>Person 1</li>
                        <li>Person 2</li>
                    </ul>
                </li>
                <li><a href="#">Students</a></li>
                <li><a href="#">About</a></li>
                <li><a>Home</a>
                    <ul>
                        <li>test 1</li>
                        <li>test 2</li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
    
    </html>

这是css代码

.navbar ul {
    position: fixed;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f9f9f9;
    z-index: 4;
    width: 100%;
    list-style-type: none;
    }


.navbar ul li {
    transition: 0.2s;
    float: right;
    margin: 0.7%;
    }

.navbar ul li a {
    position: relative;
    display: block;
    text-align: center;
    margin: 7px 25px;
    color: #252525;
    text-decoration: none;
    font-size: 23px;
    }

.navbar ul:hover li {
    opacity: 0.2;
    filter: blur(2px);
    }

.navbar ul li:hover {
    opacity: 1;
    filter: blur(0px);
    }

.navbar ul ul {
    display: none;
    }

.navbar ul li:hover > ul{
    display: block;
    position: absolute;
    float: left;
}
4

1 回答 1

0

由于下拉菜单在“z”轴上的图像“后面”，您的标题图像可能会阻止您的下拉元素。您可以尝试以任意数字将 z-index CSS 属性添加到下拉列表中，这将使其“高于”图像，类似于“发送到后面”或“发送到前面”在常见编辑程序中的工作方式。z-index 的 CSS 如下：

img {
  z-index: 1000;
}
于 2021-06-17T18:46:28.160 回答