为什么下拉菜单不显示在内容之上？

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;

代码笔： 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;
}

这将使您的菜单保持在顶部。

为什么下拉菜单不显示在内容之上？

Why doesn't menu on drop down appear over content?

css

menu

z-index