我试图在屏幕的右上角找到一个菜单，以下拉到Google地图上。我可以将其下拉，但它隐藏在Google地图的后面。
我一直在寻找并一直在寻找有关z-index的帖子，所以我假设它与此有关，但是我无法使其工作。我能完成的最好的工作就是显示下拉菜单，有点透明。
如果我将地图的z-index更改为-1，则菜单将起作用，但随后我将失去地图的功能。我还可以将下拉菜单的位置更改为绝对位置，然后将其放下，但是然后将其下拉到左侧，这不是我想要的。
我不确定我在做什么错。任何帮助是极大的赞赏。
谢谢
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>
答案 0 :(得分：1)
在选择器处：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>
答案 1 :(得分：0)
您可以简单地添加以下行：
ILevellable始终尝试将您的nav ul {
z-index: 1; /* To keep the menu on top of the map */
}
保持在最低水平。
This codepen显示了添加该行后的外观，您可以看到现在您不会失去任何地图功能。
所以您的CSS看起来像这样：
z-index答案 2 :(得分：0)
为nav ul li：hover ul更改以下内容：
display: block;
z-index: 1;
第一个规则使子元素彼此重叠放置，就像被堆叠的块一样。第二条规则使元素呈现在z索引较低的所有其他元素之上。
如果您想进一步了解展示广告，请访问此链接：
https://css-tricks.com/almanac/properties/d/display/
如果您想进一步了解z-index，请访问此链接：