Question

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

我已尝试将菜单div定位，因此它应该位于主体div上方，但是Google地图的脚本仍与div菜单CSS重叠。请问如何解决此问题的任何线索？

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

Answer 1

应该使用斧头选择器并添加更高的z-index，如：

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

https://jsfiddle.net/Lx98qgv1/

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

1 个答案: