我的导航栏被Javascript地图阻止。怎么解决？

Question

每当我将鼠标悬停在导航栏上时，它都会创建一个下拉菜单，但会被地图阻止，并使用脚本标记创建。

以下是它的外观：

>>> import scipy.stats
>>> scipy.stats.f.ppf(q=1-0.05, dfn=3, dfd=39)
2.8450678052793514
>>> crit = _
>>> scipy.stats.f.cdf(crit, dfn=3, dfd=39)
0.95000000000000007

// 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";
    }
}

@charset "utf-8";
/* 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%;
}

.text{
	width:100%;
	display: inline-block;
	text-align: center;
}

body {margin:0;}

/*This will style the navigation bar container*/
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  top: 0;
  position:fixed;
  width: 100%;
  background-color: rgba(0,0,0,0.75);
  text-align:center;
}

ul.topnav li {float: left;}

/*This will style the items in navigation bar*/
ul.topnav li a, .dropbtn {
  display: block; 
  color: #FFF;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 13.75px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-weight:bold;
}

ul.topnav li a:hover, .dropdown:hover .dropbtn {background-color: #F00;}

ul.topnav li.dropdown {
    display: inline-block;
    position: relative; 
}

/*This will style the dropdown container*/
ul.topnav .dropdown-content{
    display:none;
    position: absolute;
    background-color: #000;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    text-align:center;
    left: 0; 
}

/*This will style the dropdown items*/
ul.topnav .dropdown-content a{
    color: #FFF;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
ul.topnav .dropdown-content a:hover {
    background-color: #999;
}

ul.topnav .dropdown:hover .dropdown-content {display: block;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) { /* Allow responsive navigation bar */
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }

  ul.topnav.responsive .dropdown-content{
    width: auto;
    min-width: 160px;
    left: 0;
  }

  ul.topnav li.dropdown{
    position: static;
  }
}

.topnav li {
    width: 20%;
    margin: 0;
    padding:0;
}

/*Footer CSS*/

body{
    padding: 0;
    display: flex;
    min-height: 100vh;
    flex-wrap: wrap;
}

.wrapper{
    padding:20px;
    height:auto;
}

footer{
    background-color:#333;
    color: #FFF;
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    font-weight:bold;
    align-self: flex-end;
    line-height: 3;
    text-align: center;
    width: 100%;
}

footer img{
    width:42px;
    height: 42px;
    margin: 0 1em;
}

hr{
    width:100%;
}

footer p{white-space:pre;
font-size: 3vmin;} /* Change. Please apply to other footers. */

我想要实现的是将下拉菜单放在前面，然后将地图放到后面。

Answer 1

您所描述的是 z-index 的完美用例。要了解更多信息，https://developer.mozilla.org/en-US/docs/Web/CSS/z-index。

基本上，z-index越大，屏幕“越接近”，z-index越小。因此，在您的情况下，只需将导航设置为z-index: 2;，将地图设置为z-index:1;。