Javascript 当页面包含谷歌地图时，修复IE7中CSS/JS下拉列表的最佳方法

我有一个页面使用

列表进行导航（Javascript将样式更改为在鼠标上方显示或不显示）

这对我来说很好，除了在IE6和IE7中，当我在页面上有谷歌地图时

在这种情况下，下拉列表根本不起作用。不过，该页面在Firefox2中仍能正常工作

我做了一些研究，发现这可能是IE选择框错误的一个例子，但我不确定，因为谷歌地图似乎使用的是

，而不是

---

有没有其他人遇到过类似的问题？如果有，他们对解决此问题的最佳方法有什么建议？

我没有立即的答案，但是中提到的工具（特别是IE DOM Inspector）可能会有帮助。

我不知道这是否能解决您的问题，但您可能想试试哪种方法可以解决下拉列表下方出现菜单的问题。我不知道它是否会起作用，但值得一试。

我修复了一个类似的问题，在IE6/IE7/IE8中，flash电影中没有出现下拉列表，使用以下方法：

其中，

primary nav

是下拉式容器元素的

ID

，而

footer

是页面上最后一个元素的

ID

。然后，我使用绝对定位将下拉列表重新定位到它们所属的顶部

---

这样做之所以有效，是因为IE更尊重源代码排序，而不是

z-index

。尽管如此，它仍然无法显示在Windows Media Player插件之上。

我相信这可能是因为IE 6+使用Active-X东西解析CSS

随着时间的推移，我不得不调整我的工作，在我的CSS中加入一些IE黑客，以使其与多种浏览器兼容

我会首先尝试使用纯CSS，包括我提到的hacks，制作一个没有Javascript的菜单。这可能会解决你的问题。你实际上不需要Javascript来改变鼠标上方的样式之类的东西

如果你想了解CSS黑客是关于什么的：点击

如果您想查看一些纯CSS菜单示例：单击

希望这有帮助

根据，您是正确的-IFrame由google代码插入

你需要使用丹提到的解决方案

您可能需要尝试哪种方法来解决下拉列表下方出现菜单的问题

或者，请参见

基本上，解决方案是使用JavaScript将css菜单放置在IE6中的IFrame中

另一种解决方案是在CSS菜单下拉时使用JavaScript隐藏Google地图，或者在CSS菜单下拉时使用静态地图（甚至可能是Google静态地图）替换Google地图

$(function () {
  $("#primary-nav").appendTo("#footer");
});