My navbar creates a dropdown menu when I hover over it, but the map generated with the script tag blocks it.
Here is the current setup:
// JavaScript Document
//This will make the navigation bar responsive.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
// CSS Styles
/* CSS Document */
h1 {
margin-top: 2.2em;
margin-bottom: 2.2em;
width:100%;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 5vmin;
color: white;
text-align:center;
font-weight: 300;
}
.auto-style1{
left: 25%;
right: 25%;
}
#map {
height: 200px;
width: 50%;
}
// More CSS styles...
// HTML content
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<title>Contact Us</title>
<link href="_css/headfoot.css" rel="stylesheet" type="text/css">
<link href="_css/SPcontent.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-image: url(http://hitcolors.com/wp-content/uploads/2016/08/Green-1.jpg);
}
</style>
<script src="_script/headfoot.js"></script>
</head>
...
I want to bring the dropdown menu to the front and push the map to the back.