Olá, peço a ajuda de vocês.
O menu responsivo quando eu clico, ele abre em baixo do slider.
Ja tentei usar z-index, mas não funcionou.
Segue abaixo o código:
(Lembrando que estou começando a estudar agora, então se tiver gambiarra e erros de código me desculpem. Aceito sugestões para melhorar também!)
<div class="container">
<div class="menu">
<nav>
<div>
<i class="fa fa-bars"></i>
</div>
<ul class="menuUL">
<li><a href="#">Home</a></li>
<li><a href="#">Cursos</a></li>
<li><a href="#">Galeria</a></li>
<li><a href="#">Clientes</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</div>
<div class="container-position">
<div class="slider">
<img class="mySlides" src="images/1.jpg">
<img class="mySlides" src="images/2.jpg">
<img class="mySlides" src="images/3.jpg">
<img class="mySlides" src="images/4.jpg">
<span onclick="plusDivs(-1)">
<i class="fas fa-angle-left"></i>
</span>
<span onclick="plusDivs(+1)">
<i class="fas fa-angle-right"></i>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = x.length;
}
;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
</script>
<script type="text/javascript">
$("nav div").click(function () {
$("ul").slideToggle();
$("ul ul").css("display", "none");
});
$(window).resize(function () {
if ($(window).width() > 768) {
$("ul").removeAttr('style');
}
});
</script>
css:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container{position: relative;}
/* ----------------------MENU-----------------------*/
.menu{
position: fixed;
width: 100%;
box-shadow: 1px 1px 2px #333;
-webkit-box-shadow: 1px 1px 2px #333;
-moz-box-shadow: 1px 1px 2px #333;
}
.menuUL{
list-style: none;
background: #003333 ;
text-align: right;
margin: 0;
padding-right: 110px;
}
.menuUL li{
display: inline-block;
}
.menuUL li a{
color: #fff;
text-decoration: none;
padding: 25px 35px;
font-size: 1.2em;
display: block;
}
.menuUL li:hover{
background: #006666;
}
nav div{
display: none;
background: #003333;
color: #fff;
font-size: 24px;
padding: 0.6em;
cursor: pointer;
}
/SLIDER_/
.slider{
width: 100%;
position: relative;
top: 72px;
}
.slider img{
width: 100%;
position: relative;
}
.fa-angle-left{
color: white;
position: absolute;
top: 45%;
left: 3%;
font-size: 35px;
cursor: pointer;
}
.fa-angle-right{
color: white;
position: absolute;
font-size: 35px;
top: 45%;
left: 96%;
cursor: pointer;
}
/------------------Responsivo---------------------/
@media(max-width: 768px) {
nav div {
display: block;
}
.menuUL {
width: 100%;
display: none;
padding: 0;
}
.menuUL li{
padding: 0;
display: block;
}
.menuUL li a{
text-align: center;
}
.fa-angle-right{
left: 93%;
}
}