如何让下拉菜单显示超过 google 个地图？

Question

我正在尝试在屏幕右上角设置一个菜单，以便在 google 地图上下拉。我可以让它掉下来，但它隐藏在 google 地图后面。

我一直在寻找有关 z-index 的帖子，所以我假设它与此有关，但我无法让它发挥作用。我能够完成的最好的事情就是让下拉菜单显示出来，有点透明。

如果我将地图的 z-index 更改为 -1，菜单可以使用，但我会失去地图的功能。我也可以把下拉菜单的位置改成absolute让它放下，但是它又往下往左掉，这不是我想要的。

我不确定我做错了什么。任何帮助是极大的赞赏。

谢谢

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>

Answer 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>

Answer 2

您可以简单地添加这一行：

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

总是尽量保持你的 z-index 尽可能低。

This codepen 显示了添加该行后的样子，您可以看到现在您不会失去任何地图功能。

所以你的 CSS 看起来像这样：

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

Answer 3

更改 nav ul li:hover ul 的以下内容：

display: block;
z-index: 1;

第一条规则使子元素像堆叠的块一样放置在彼此之上。第二条规则使元素呈现在所有其他 z-index 较低的元素之上。

如果您想了解有关显示的更多信息，请访问此 link:

https://css-tricks.com/almanac/properties/d/display/

如果您想了解更多关于 z-index 的信息，请访问此 link:

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

如何让下拉菜单显示超过 google 个地图？

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

html

css

google-maps

z-index