html - 正在显示CSS子菜单的Google Maps脚本

我的CSS导航菜单有些起作用，但在我设置的Google地图后面。它在DIV标签中，但是我已经做到了，因此它位于它下面的主要DIV标签的顶部，但是我在Google Map脚本上使用了叠加在导航地图上。

我试图将菜单div定位，以使其位于主体div上，但是google maps的脚本仍然与div菜单CSS重叠。请问如何解决这个问题的任何线索？

JSFIDDLE code here

.nav-bar ul li:hover, #mega-menu{
  opacity: 1;
  visibility: visible;
}

.inner-mega-menu{
  width: 24%;
  float: top;
  margin-right: 1%;
}

.inner-mega-menu p{
  padding: 10px 0;
  transition: all 0.4s ease;
}

.inner-mega-menu:last-child{
  margin-right: 0%;
}

最佳答案

应该使用斧头选择器并添加更高的z索引，例如：

.nav-bar ul li:hover > .mega-menu{
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

https://jsfiddle.net/Lx98qgv1/