我正在处理导航栏设置和图像滑块。我合并了两个代码，因为我最初在不同的文件中处理它们。一切正常，除非调整浏览器窗口大小以显示移动菜单，单击菜单按钮时菜单不会显示。显示菜单是因为图像过渡时可以看到。
我已将z-index添加到我能想到的所有内容中，尝试将菜单覆盖在图像滑块的顶部，但似乎没有帮助。
如何让菜单显示在图像滑块上？
要查看此消息，请转到此处：http://realtorcatch.com/slider2
以下是所有代码：
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
<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 -->
移动菜单的Jquery。
$('span.nav-btn').click(function () {
$('ul.nav_list').slideToggle(500);
})
$(window).resize(function (){
if ( $(window).width() > 640 ) {
$('ul.nav_list').removeAttr('style');
}
});
谢谢！