How to get drop down menu to show over google maps?

I am trying to get a Menu on the right corner of my screen to drop down over google maps. I can get it to drop down, but it is hidden behind google maps.

I have looked and keep finding posts about z-index, so i am assuming it has something to do with this, however i cannot make it work. The best i have been able to accomplish is get the drop down menu to show up, sort of transparent.

If i change the z-index of the map to -1 the menu works, but then i lose functionality of the map. I can also change the position of the drop down menu to absolute and get it to drop, but then it drops down and to the left, which is not what i want.

I am not sure what i am doing wrong. Any help is greatly appreciated.

Thanks

nav {
    text-align: center;
    width: 100%;
    height: 75px;
    background-color: #636363;
}
nav img {
    float: left;
    padding: 20px 20px;
}
nav span {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #ffffff;
    width: 400px;
}
nav ul {
    float: right;
}
nav ul li {
    float: left;
    list-style: none;
    position: relative;
}
nav ul li a {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 28px;
    padding: 15px 14px;
    text-decoration: none;
    padding: 10px 10px 15px 0px;
    
}
nav ul li ul {
    display: none;
    position: absolute;
    background-color: #636363;
    padding: 10px;
    right: 0;
    border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul{
    display: block;
    
}
nav ul li ul li {
    width: 150px;
    border-radius: 4px;
    position: relative;
}
nav ul li ul li a  {
    padding: 8px 14px;
}

nav ul li ul li a:hover {
    background-color: #585656;
}

/* style the map box */
#map{
	  width:100%;
    height:500px;
}

<!DOCTYPE html>
<html>

<head>
	<title>Fargo Food Trucks</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<!-- Menu with dropdowns -->

<nav>
	<span>Fargo Food Trucks</span>
	<img src="images/badlogo.png" alt="">
	<ul>
		<li><a href="#">Menu</a>
		<ul>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
		</ul>
		</li>
	</ul>
</nav>


<!-- map		-->
<div " id="map" >

<script>
	function startMap() {
		var location= {lat: 46.879603, lng: -96.787903};
    	var map=new google.maps.Map(document.getElementById("map"),{
    	zoom:13,
    	center: location
	});
    	var marker = new google.maps.Marker({
    		position: location,
    		map: map
    	});

}
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjEzeWaDuillu5nCJnDug6ITpNiqt9I8Y&callback=startMap"></script>

</div>
</body>
</html>

Solution

You can simply add this line:

nav ul {
  z-index: 1; /* To keep the menu on top of the map */
}

Always try to keep your z-index as low as possible.

This codepen shows how it looks after adding that line, you can see that now you don't lose any of the map functionality.

So your CSS would look like this:

nav {
    text-align: center;
    width: 100%;
    height: 75px;
    background-color: #636363;
}
nav img {
    float: left;
    padding: 20px 20px;
}
nav span {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #ffffff;
    width: 400px;
}
nav ul {
    float: right;
    z-index: 1; /* To keep the menu on top of the map */
}
nav ul li {
    float: left;
    list-style: none;
    position: relative;
}
nav ul li a {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 28px;
    padding: 15px 14px;
    text-decoration: none;
    padding: 10px 10px 15px 0px;

}
nav ul li ul {
    display: none;
    position: absolute;
    background-color: #636363;
    padding: 10px;
    right: 0;
    border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul{
    display: block;

}
nav ul li ul li {
    width: 150px;
    border-radius: 4px;
    position: relative;
}
nav ul li ul li a  {
    padding: 8px 14px;
}

nav ul li ul li a:hover {
    background-color: #585656;
}

/* style the map box */
#map{
      width:100%;
    height:500px;
}