下拉菜单隐藏在 IE 中的其他元素后面答案

【问题标题】：Dropdown menu hides behind other elements in IE下拉菜单隐藏在 IE 中的其他元素后面
【发布时间】：2011-04-27 17:35:24
【问题描述】：

我在我的一个项目中安装了 site5 的大胆主题，但遇到了一个主要问题。

在 Internet Explorer（8 或更低版本）中浏览时，顶部下拉菜单会显示在其他一些元素（主要内容滑块、H1 等）后面。我已经尝试了所有方法，从更改所有z-index 的固定位置，没有运气。

您可以通过访问site5 的Boldy 演示页面http://wordpress.site5.net/boldy/ 并将鼠标悬停在IE 中顶部菜单的博客选项卡上来查看问题。

我已经要求site5调查，他们知道问题，但没有找到任何解决方案。

【问题讨论】：

标签： css internet-explorer wordpress drop-down-menu

【解决方案1】：

好的原始解决方案在这里 - Swiss credit website。这可行，但使用了复杂的 z-index 解决方案。这是非常简单和改进的解决方案 - Jeyjoo stock image gallery 这适用于 IE6+、firefox、opera、safari 和 chrome

解决方案

HTML

<div id="container_page" class="container_page">
  <div id="container_header" class="container_header">
    NAV BAR GOES HERE
  </div>
  <div id="container_body" class="container_body">
    ...body text...
  </div>
</div>

CSS

#container_page #container_header {position:relative;z-index:2;}
#container_page #container_body {position:relative;}

为什么会起作用

你必须告诉 IE 这两个 div 是如何相互关联的。

【讨论】：

我只是想告诉人们我讨厌 ie 8，不过谢谢你，我真的需要它，我不知道发生了什么

【解决方案2】：

我看到你还没有解决这个问题。我在子菜单上找到了解决方案 - Chkredit - swiss credit website 可在所有版本的 IE 中使用，并且轻巧且 100% CSS（无 javascript）。

基本上问题在于 IE 没有正确使用 z-index。检查 CSS 代码中的 z-index。你需要在菜单隐藏的项目上放置一个 z-index -1。

我现在正在为自己的图片库解决完全相同的问题（转到“顶部图片”页面）-jeyjoo image gallery

【讨论】：

【解决方案3】：

如果我没记错的话，IE 没有正确地从菜单中子 li 项的顶部导航继承 z-index。这就是 z-index 为 60 的照片将其覆盖的原因。您可以在这里做两件事。

消除照片 z-index。
直接为子列表指定 z-index 为 100，而不仅仅是顶部导航列表。

【讨论】：

【解决方案4】：

（不是我的脚本）很确定我可能在这里找到了答案，但我找不到。无论哪种方式，这对我来说都很棒......

$(function() {
var zIndexNumber = 1000;
$('ul').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
});
});

只需确保您的 css 包含 position 和 z-index 以便脚本可以访问这些值。

向提出这个问题的人表示敬意 - 为我省去了很多麻烦。

【讨论】：