Javascript 我的内容是媒体查询中的浮动beind容器

我试图创建一个汉堡菜单，当我创建时，当我给出一个

float:none时，我的
.nav列表
在容器后面

我试着给它
margin:0和一切，但没有什么似乎工作。我试图让它打开并降低容器的高度，关闭时，增加容器的高度并降低菜单栏的高度

这是我的代码，其余的在这个代码笔中：

HTML:

<div id="jobs-popup">

    <img id="x-icon1" src="Pictures/web%20x%20icon%20white.png">

    <div class="jobs-content">
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        ...
    </div>

</div>
<!--End Section for Jobs Popup -->

<!-- Section for contact popup -->
<div id="contact-popup">

    <img id="x-icon2" src="Pictures/web%20x%20icon%20white.png">

    <div id="contact-content">
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        ...
    </div>

</div>
<!-- End Section for Contact Popup -->

<!-- Section for Press popup -->
<div id="press-popup">

    <img id="x-icon3" src="Pictures/web%20x%20icon%20white.png">

    <div id="press-content">
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        ...
    </div>

</div>
<!-- End section Press -->

<!-- Section for legal popup -->
<div id="legal-popup">

    <img id="x-icon4" src="Pictures/web%20x%20icon%20white.png">

    <div id="legal-content">
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        ...
    </div>

</div>
<!-- End section Legal -->

<!-- Section for Support -->
<div id="support-popup">

    <img id="x-icon5" src="Pictures/web%20x%20icon%20white.png">

    <div id="support-content">
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        ...
    </div>

</div>

<center>

    <div id="top-bar">

        <a class="burger-nav"></a>

        <div id="nav-bar">

            <ul>
                <a href="#" id="jobs" class="test">
                    <li class="nav-list" id="job-under">Jobs</li>
                </a>

                <a href="#" id="contact" class="test">
                    <li class="nav-list" id="contact-under">Contact</li>
                </a>

                <a href="#" id="press" class="test">
                    <li class="nav-list" id="press-under">Press</li>
                </a>

                <a href="#" id="legal" class="test">
                    <li class="nav-list" id="legal-under">Legal</li>
                </a>

                <a href="#" id="support" class="test">
                    <li class="nav-list" id="support-under">Support</li>
                </a>
            </ul>

        </div>

    </div>

    <div id="container">

        <ul id="menu"></ul>

        <h1 id="name">Touch</h1>

        <ul class="bubbles">

            <li id="firstCircle"></li>
            <li id="secondCircle"></li>
            <li id="thirdCircle"></li>
            <li id="fourthCircle"></li>
            <li id="fifthCircle"></li>
            <li id="sixthCircle"></li>

        </ul>

    </div>

</center>


试验
试验
试验
试验
试验
试验
试验
...
试验
试验
试验
试验
试验
试验
试验
...
试验
试验
试验
试验
试验
试验
试验
...
试验
试验
试验
试验
试验
试验
试验
...
试验
试验
试验
试验
试验
试验
试验
...


触碰








在代码开头的所有弹出元素上都有
位置
和
z索引
值，它们覆盖在媒体查询布局中的
#顶栏
上。要将
#顶部栏
放在它们上面，请给它一个非静态的
位置
，并给它一个高于弹出窗口的
z索引
。我使用了
#顶栏{位置：相对；z索引：101；}

并且要去除
#顶栏中
ul
上的默认
左填充
，请应用
填充：0

顺便说一句，您在
#顶栏中的
li
中有
href
属性。不过你可以解决这个问题


#顶栏{
最大宽度：100%；
最大高度：7%；
保证金：0自动；
背景色：#FFFFFF；
位置：相对位置；
z指数：101；
}
#顶杆{
填充：0；
}
#容器{
宽度：100%；
身高：100%；
保证金：0自动；
背景图像：线性渐变（向右，#6a11cb 0%，#2575fc 100%）；
位置：相对位置；
溢出：隐藏；
}
身体{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
字体系列：“Roboto”，无衬线；
颜色：#262626；
溢出：隐藏；
}
保险商实验室{
列表样式：无；
最高：9%；
}
.导航列表{
浮动：左；
字体大小：1.2米；
右：1%；
字体大小：粗体；
利润率：2%；
}
/*注册气泡部分------------------------------------------*/
.泡泡{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：0；
变换：translateZ（0）；
}
李先生{
位置：绝对位置；
列表样式：无；
显示：块；
边界半径：100%；
-ms动画：fadeAndScale 33s无限轻松；
-webkit动画：fadeAndScale 33s无限轻松；
-moz动画：fadeAndScale 33s无限轻松；
-o-动画：fadeAndScale 33s无限轻松；
过渡时间函数：线性；
}
/*第一个圆动画---------------------------------------------------------------------------------------------*/
.li:第n个孩子（1）{
宽度：9%；
身高：20%；
最高：20%；
左：20%；
背景图像：线性梯度（45度，#ff9a9e 0%，#fad0c4 99%，#fad0c4 100%）；
动画名称：第一圈；
}
/*Mozilla第一圈动画*/
@-moz为firstCircle设置关键帧{
0% {
z指数：100；
-moz变换：比例（0）；
}
100% {
z指数：0；
-moz变换：标度（200）；
}
}
/*Webkit第一圈动画*/
@-webkit关键帧firstCircle{
0% {
z指数：100；
-webkit变换：缩放（0）；
}
100% {
z指数：0；
-webkit转换：规模（200）；
}
}
@-ms关键帧第一圈{
0% {
z指数：100；
-ms变换：尺度（0）；
}
100% {
z指数：0；
-ms变换：标度（200）；
}
}
/*结束第一个圆动画--------------------------------------------------------------------*/
/*开始第二个圆动画-------------------------------------------------------------------------------------------*/
.li:第n个孩子（2）{
宽度：9%；
身高：20%；
位置：绝对位置；
左：40%；
最高：40%；
动画名称：secondAnimation；
}
/*Webkit第二动画*/
@-webkit关键帧辅助动画{
0% {
z指数：100；
-webkit变换：缩放（0）；
}
100% {
z指数：0；
-webkit转换：规模（200）；
}
}
/*Mozilla第二动画*/
@-moz关键帧动画{
0% {
z指数：100；
-moz变换：比例（0）；
}
100% {
z指数：0；
-moz变换：标度（200）；
}
}
/*Ms第二动画*/
@-ms关键帧辅助动画{
0% {
z指数：100；
-ms变换：尺度（0）；
}
100% {
z指数：0；
-ms变换：标度（200）；
}
}
/*第二圈结束-------------------------------------------------------------------*/
/*第三圈开始-------------------------------------------------------------------*/
.li:第n个孩子（3）{
宽度：9%；
身高：20%；
位置：绝对位置；
左：60%；
排名前10%；
动画名称：第三代；
}
/*Webkit第三动画*/
@-webkit关键帧第三代化{
0% {
z指数：100；
-webkit变换：缩放（0）；
}
100% {
z指数：0；
-韦布基