Ajuda com menu responsivo

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*.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%; } **
*

*

**
} **
*