我正在尝试在屏幕右上角设置一个菜单，以便在谷歌地图上下拉。我可以让它掉下来，但它隐藏在谷歌地图后面。
我一直在寻找有关 z-index 的帖子，所以我假设它与此有关，但我无法让它发挥作用。我能够完成的最好的事情就是让下拉菜单显示出来，有点透明。
如果我将 map 的 z-index 更改为 -1，菜单会起作用，但我会失去 map 的功能。我还可以将下拉菜单的位置更改为绝对位置并使其下降，但随后它会下降并向左移动，这不是我想要的。
我不确定我做错了什么。任何帮助是极大的赞赏。
谢谢
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>最佳答案
在选择器处:nav ul li:hover ul
nav ul li:hover ul{
display: flex;
position: absolute;
z-index: 2000;
top: 58px;
}
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 a.targetDrop{
float: right;
}
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: flex;
position: absolute;
z-index: 2000;
top: 58px;
}
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="#" class="targetDrop">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>关于html - 如何让下拉菜单显示在谷歌地图上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52176028/