Ajuda com menu responsivo

Front-end
#1

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%;

}

}

#2

Consegui !