Javascript 切换菜单显示在图像后面

我正在工作的导航栏设置和图像滑块。当我最初在不同的文件中处理它们时，我将两者的代码结合起来。一切正常，但当浏览器窗口调整大小以显示移动菜单时，单击菜单按钮时菜单将不显示。显示菜单是因为在图像转换时可以看到它

我已经将z-index添加到我能想到的所有东西中，尝试将菜单覆盖在图像滑块的顶部，但它似乎没有帮助

如何使菜单显示在图像滑块上

要观看现场直播，请点击此处：

以下是所有代码：

CSS：

body {
margin: 0;
background: #F5F6F8;
}
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#sliderWrapp {
    text-align: center;
    background: #fff;
    /*padding: 30px 10px;*/
    border-bottom: 1px solid #DDE0E7;
    /*position: absolute;*/
    /*width: 100%;*/
}
#sliderWrapp > div {
    margin: 0 auto;
}

/*-----Start of code for the header-----*/
.header {
    margin: 0;
    background-color: #333;
    /*background-color: rgba(51,51,51,0);*/
    height: 80px;
    /*position: absolute;*/
    z-index: 999;
}
.header_wrap {
    margin: 0 15%;
}
.logo {
    color: #FFF;
    font-size: 1.2em;
    padding-top: 25px;
    position: absolute;
}
.nav_list {
    text-decoration: none;
    background-color: #333;
    /*background-color: rgba(51,51,51,0);*/
    color: #FFF;
    margin: 0;
    list-style: none;
    text-align: right;
}
.nav_list > li {
    display: inline-block;
    padding: 25px 15px;
}
.nav_list > li > a {
    text-decoration: none;
    font-size: 1.2em;
    color: #FFF;
}

    @media screen and (max-width:640px) {
        body {
            background-color: blue;
        }
        .header_wrap {
            margin: 0 5%;
        }
        .nav_list {
            padding: 0;
            text-align: center;
            display: none;
            margin-top: 60px;
            width: 100%;
            z-index: 999;
        }
        .nav_list > li {
            display: block;
            border-bottom: 1px solid #FFF;
            z-index: 999;
        }
        /*.nav_list > li > a {
            width: 100%;
        }*/
        .nav-btn {
            display: block;
            background-color: #333;
            color: #FFF;
            font-size: 1.5em;
            text-align: right;
            cursor: pointer;
            padding-top: 20px;
        }
        .nav-btn:before {
            /*content: url('icons/mobile_menu_bttn.png');*/
            background-image: url('icons/mobile_menu_bttn.png');
            background-size: 28px 28px;
            background-repeat: no-repeat;
            width: 28px;
            height: 28px;
            content:"";
            display: block;
            float: right;
        }
    }

HTML

---

谢谢

我终于明白了。我添加了

位置：相对

到我的移动媒体查询“

.nav_list

，使用z-index，它工作得非常完美。太糟糕了，我很高兴今天能再次帮助你！：）你干得真好doing@AndrewAdam我很感激！我终于明白了。我添加了

位置：相对

到我的移动媒体查询“

.nav_list

，使用z-index，它工作得非常完美。太糟糕了，我很高兴今天能再次帮助你！：）你干得真好doing@AndrewAdam我很感激！

<div id="sliderWrapp">
<header class="header">
    <div class="header_wrap">
        <div class="logo">Garbrandt Construction</div>
        <nav>
            <span class="nav-btn"></span>
            <ul class="nav_list">
                <li><a href="#">Services</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
</header>
    <!-- Start cssSlider -->
    <!-- Generated by cssSlider.com 2.1 -->
    <link rel="stylesheet" href="cssslider_files/csss_engine1/style.css">
    <!--[if IE]><link rel="stylesheet" href="cssslider_files/csss_engine1/ie.css"><![endif]-->
    <!--[if lte IE 9]><script type="text/javascript" src="cssslider_files/csss_engine1/ie.js"></script><![endif]-->
    <script type="text/javascript" src="cssslider_files/csss_engine1/gestures.js"></script> <div class='csslider1 autoplay '>
    <input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide' >
    <input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide' >
    <input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide' >
    <input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' checked>
    <input name="cs_anchor1" id='cs_pause1_0' type="radio" class='cs_anchor pause'>
    <input name="cs_anchor1" id='cs_pause1_1' type="radio" class='cs_anchor pause'>
    <input name="cs_anchor1" id='cs_pause1_2' type="radio" class='cs_anchor pause'>
    <ul>
        <li class="cs_skeleton"><img src="cssslider_files/csss_images1/subway.jpg" style="width: 100%;"></li>
        <li class='num0 img slide'> <img src='cssslider_files/csss_images1/subway.jpg' alt='subway' title='subway' /></li>
        <li class='num1 img slide'> <img src='cssslider_files/csss_images1/beach.jpg' alt='beach' title='beach' /></li>
        <li class='num2 img slide'> <img src='cssslider_files/csss_images1/space.jpg' alt='space' title='space' /></li>
    </ul><div class="cs_engine"><a href="http://cssslider.com">cssslider.com</a> by cssSlider.com v2.1</div>
    <div class='cs_description'>
        <label class='num0'><span class="cs_title"><span class="cs_wrapper">subway</span></span></label>
        <label class='num1'><span class="cs_title"><span class="cs_wrapper">beach</span></span></label>
        <label class='num2'><span class="cs_title"><span class="cs_wrapper">space</span></span></label>
    </div>
    <div class='cs_play_pause'>
        <label class='cs_play' for='cs_play1'><span><i></i><b></b></span></label>
        <label class='cs_pause num0' for='cs_pause1_0'><span><i></i><b></b></span></label>
        <label class='cs_pause num1' for='cs_pause1_1'><span><i></i><b></b></span></label>
        <label class='cs_pause num2' for='cs_pause1_2'><span><i></i><b></b></span></label>
        </div>
    <div class='cs_arrowprev'>
        <label class='num0' for='cs_slide1_0'><span><i></i><b></b></span></label>
        <label class='num1' for='cs_slide1_1'><span><i></i><b></b></span></label>
        <label class='num2' for='cs_slide1_2'><span><i></i><b></b></span></label>
    </div>
    <div class='cs_arrownext'>
        <label class='num0' for='cs_slide1_0'><span><i></i><b></b></span></label>
        <label class='num1' for='cs_slide1_1'><span><i></i><b></b></span></label>
        <label class='num2' for='cs_slide1_2'><span><i></i><b></b></span></label>
    </div>
    <div class='cs_bullets'>
        <label class='num0' for='cs_slide1_0'> <span class='cs_point'></span>
            <span class='cs_thumb'><img src='cssslider_files/csss_tooltips1/subway.jpg' alt='subway' title='subway' /></span></label>
        <label class='num1' for='cs_slide1_1'> <span class='cs_point'></span>
            <span class='cs_thumb'><img src='cssslider_files/csss_tooltips1/beach.jpg' alt='beach' title='beach' /></span></label>
        <label class='num2' for='cs_slide1_2'> <span class='cs_point'></span>
            <span class='cs_thumb'><img src='cssslider_files/csss_tooltips1/space.jpg' alt='space' title='space' /></span></label>
    </div>
    </div>
    <!-- End cssSlider -->

$('span.nav-btn').click(function () {
    $('ul.nav_list').slideToggle(500);
})
$(window).resize(function (){
    if ( $(window).width() > 640 ) {
        $('ul.nav_list').removeAttr('style');
    }
});