Google 隐藏菜单内的地图

Question

我有一个奇怪的问题 - 我有一个下拉菜单，它是由悬停触发的。元素是 Google 地图和两个带有内容的子菜单。将鼠标悬停在菜单标签上方时，下拉菜单可以正常工作。但是，当光标悬停在菜单下方的空白 space 上时，Google 地图就会变得可见。我已尝试相应地设置 z-index，但没有用。

演示 jsfiddle：Jsfiddle

我只想保留菜单 html/css，以便在没有 javascript 解决方案的情况下提供任何帮助，谢谢。

编辑：无法使用显示：属性隐藏地图并再次显示，因为我需要用 css3 转换菜单。

Answer 1

您正在使用 visibility 和 opacity 来隐藏它们。这意味着元素就在您放置它们的位置，您只是看不到它们。

所以他们接收到全方位的鼠标事件。

您需要将它们放在页面之外，然后在您想要显示它们时将它们带回来。

.item {
    position: absolute;
    top: 32px;
    left: -999em;
    opacity: 0;
    width: 300px;
    height: 200px;
    display: block;
    background: #eee;
}
.menu .nav:hover .item {
    opacity: 1;
    left:0;
}

演示在 http://jsfiddle.net/q8r4j7wt/3/

Google 隐藏菜单内的地图

Google maps inside hidden menu

html

css

google-maps

drop-down-menu