Question

我有一个下拉菜单，不会显示在其他内容上。我将位置设置为绝对值，将z-index设置为99并且没有运气。任何想法如何让它在网站的其余部分之上？

<body>
    <header>
        <div class="container">
            <h1 class="logo">Relaxr</h1>

            <nav>
                <a href='#'><span class="hamburger"></span></a>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="blog.html">Blog</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <section id="main">
        <div class="container">

nav {
    position: relative;
}
nav ul {
    display: none;
}
header {
    margin-left: -20px;
    margin-right: -20px;
}
body {
    margin-left: 20px;
    margin-right: 20px;
}
.container {
    width: 100%;
    margin: 0;
}
#main {
    margin-top: 10px;
}
header nav ul li {
    display: block;
    margin-right: 20px;
    margin: 0 20px 0 0;
}
.hamburger {
    margin-top: 5px;
    margin-right: 80px;
    margin-bottom: 20px;
    float:right;
    position: relative;
    display: inline-block;
    width: 1.5em;
    height: 0.74em;
    border-top: 0.2em solid #fff;
    border-bottom: 0.2em solid #fff;
}
.hamburger:before {
    content: "";
    position: absolute;
    top: 0.9em;
    left: 0px;
    width: 100%;
    border-top: 0.2em solid #fff;
}
nav ul {    
    position: absolute;
    left: 0; top: 100%;  
    width: 100%; 
    background-color: black;
    z-index: 99;

Codepen： http://codepen.io/kiddigit/pen/wWvPJm

Answer 1

我认为你应该使用这样的东西来工作

$(".hamburger").click(function(e){
    $("nav > ul").toggle();
});

只有一个区别我在

中添加了一个结束括号

$("nav > ul").toggle();

Answer 2

在@media查询更改

中

nav {
    position: relative;
}

到

nav {
    position: absolute;
}

这将使您的菜单保持最佳状态。

为什么下拉菜单不会出现在内容上？

2 个答案: