Question

更新： mobile menu issue picture

我确信这对于高级会员来说很容易解决。我创建了带有'nav'元素的下拉菜单。由于某些原因，我尝试的很难，当你在移动设备上展开菜单时，我无法让菜单与其下方的滑块图像重叠。我试过降低滑块上的Z-index并在菜单上提高它。我究竟做错了什么？提前致谢：

更新：这是包含HTML的评论所要求的小提琴链接。 https://jsfiddle.net/wknow6cv/#&togetherjs=ADxkd31O6q

@import 'https://fonts.googleapis.com/css?family=Alegreya+Sans';

* {
margin: 0;
padding: 0;
border: 0;
overflow-x: hidden;
}

html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;

}

body {
background: #F5F5F5;
color: #67727A;
font-family: 'Alegreya', Sans-serrif;
margin: 0;
}


h3 {
font-size: 150%;
line-height: 155%;
padding: 5% 0;
font-weight: 400;
}

p{
font-size: 120%;
line-height: 150%;
padding: 3%;
text-indent: 2%;
text-align: center;

}

img{
max-width: 100%;
height: auto;
width: auto;
margin-bottom: -4px;
}

header{
background-color: #6991AC;
width: 100%;
height: 120px;


}

h1{
position:absolute;
right: 600px;
top:30px;

}


#top-left-menu {


right: 0px;
}
#logo{
margin: 20px;
float: left;
width: 380px;
height: 60px;
background: url(img/RD.png) no-repeat center;
left: 0px;
top: 0px;


}

p {
font-size: 1.4vw;
}

h3{
font-size: 1.5vw;
}
/*--- Start Navigation --*/

nav{
float: right;
padding: 25px 20px 0 0; /*--top right bottom left--*/
}

#menu-icon{
display: hidden;
width: 40px;
height: 40px;
background: url(img/nav.png) center;
}

a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}

ul{
list-style-type: none;
}

nav ul li {
font-family: 'Alegreya Sans', Sans-serrif;
font-size: 150%;
display: inline-block; 

/*makes the links go left from right instead of     up and down*/
float: left;
padding: 10px;

} 

nav ul li a {
text-decoration: none;
color: #F5F5F5;
}
nav ul li a:hover {
color: #C3D7DF;
}
/*.current{
color: #C3D7DF;
}

/*--End Navigation--*/


.one-fourth {
width: 25%;
float: left;
text-align: center;
font-family: Arial;
color: #F0F0F0;

} 

#cloud {
background-color: #C3D7DF;

}

#lock {
background-color: #6991AC;
}

#headset {
background-color: #C3D7DF;
}

#truck {
background-color: #6991AC;
}

.one-fourth i {             /*--Icons at one fourth blocks--*/
color: #F0F0F0;
font-size: 410%;
padding: 13% 0 4% 0;


}


article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;

}

#sec-1 {
background-color: #FFFFFF;
}

aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}


.one-third {
width: 33.3333333%;
float: left;
text-align: center;
color: #FFFFFF

}

#google{
background-color: #A2B1C1;
}

#marketing {
background-color: #BEB9AD;  

}

#customers {
background-color: #AADCD2;

}



/*--Start Footer--*/

footer {
background-color: #4682B4;
width: 100%;

}

.social {
list-style-type: none;
text-align: center;

}

.social li {

display: inline;

}

.social i { /*--icons--*/
font-size: 220%;
padding: 3% 3% 3% 2%;
color: #C3D7DF;
}
.social i:hover {
color: F5F5F5;
}

footer.second { /*--Socket--*/
border-top: 1px solid #AADCD2;
background-color: #544B59;
max-height: 55px;
text-align: center;
margin: 0;

}

footer.second p {
padding: 5px 0 9px 0;
text-align: center;
}

.carouselbox {
font-family: helvetica,sans-serif;
font-size: 14px;
width: 100px;
position: relative;
margin: 1em;  
border: 1px solid #ccc;
box-shadow: 2px 2px 10px #ccc;
overflow: hidden;
}

.content {
margin: 0;
padding: 0;
}

.content li {
font-size: 100px;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
text-align: center;
}

.new-inner {
height: 800px;
width: 100%;
float: left;
background-color: #FFFAFA;
font-family: Arial;
}

.nip1 {
width: 40%;
}
/*---------Insert Slideshow stuff below------*/

        .cycle-slideshow{
            width: 100%;
            display: block;
            position: relative;
            margin: 0 auto;
            overflow: hidden;

        }

        .cycle-prev, .cycle-next {
            font-size: 200%;
            color: #FFF;
            top: 50%;
            display: block;
            position: absolute;
            z-index: 9999;
            cursor: pointer;
        }

        .cycle-prev {left: 10%;}
        .cycle-next {right: 10%}
        .cycle-pager{
            width: 100%;
            text-align: center;
            display: block;
            position: absolute;
            bottom: 20px;
            z-index: 9999;
            cursor: pointer;

        }

        .cycle-pager span {
            text-indent: 100%;
            white-space: normal;
            width: 12px;
            height: 12px;
            display: inline-block;
            border: 1px solid #FFF;
            border-radius: 50%;
            margin: 0 10px;


        }

        .cycle-pager .cycle-pager-active {background: #FFF;}





/*------------MEDIA QUERIES ARE NOW STARTING-------------*/

@media screen and (max-width: 768px){




p {
    font-size: 250%;
}


h3{
    font-size: 260%;
}
header{

    width: 100%;

}

#logo {
    margin: 15px 0 20 -25px;
    background: url(img/RD_mobile.png) no-repeat center;
    float: left;
    width: 170px;
    height: 60px;

}
#menu-icon {
    display: inline-block;
}
nav ul, nav:active ul {
    display: none;
    z-index: 1000;
    position: absolute;
    padding: 20px;
    background: #6991AC;
    right: 20px;
    top: 60px;
    border: 1px solid #FFF;
    border-radius: 2px 0 2px 2px;
    width: 50%;
}
nav:hover ul {
    display: block;
}

nav li {
    text-align: center;
    width: 100%;
    padding: 10px 0;
}


.one-fourth {
    float: left;
    width: 100%;
    font-size: 30%;
}

.one-fourth i {
    font-size: 500%;
    padding: 4% 0 1% 0;
}



article {
    width: 100%;
}

aside {
    width: 100%;
}

.hand-mobile {
    display: none;

}


.social i {
    font-size: 100%;
}




}

Answer 1

也许尝试将媒体查询导航更改为position: relative;

修改请尝试相反，将display: none更改为内联：

nav ul, nav:active ul { display: inline; z-index: 1000; position: relative; padding: 20px; background: #6991AC; right: 20px; top: 60px; border: 1px solid #FFF; border-radius: 2px 0 2px 2px; width: 50%; }

CSS：滑块重叠移动下拉菜单 - Z-Index问题？

1 个答案: