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

I have installed the Boldy theme from site5 on one of my projects and have run into one major problem.

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

When browsing in internet explorer (8 or lower), the top dropdown menu gets displayed behind some other elements (main content slider, H1's etc.). I've tried everything from changing all the z-index's to fixed positions, with no luck.

当浏览internet explorer(8或更低)时，顶部下拉菜单会显示在其他元素后面(主内容滑块、H1等)。我尝试了各种方法，从改变所有的z指数到固定的位置，运气都不好。

You can view the problem by visiting site5's Boldy demo page http://wordpress.site5.net/boldy/ and hovering over the top menu's blog tab in IE.

您可以访问site5的Boldy演示页面http://wordpress.site5.net/boldy/并悬停在IE中的top菜单的blog选项卡上查看问题。

I have asked site5 to look into it, they are aware of the problem, but have failed to find any solutions.

我已经让site5去研究它，他们已经意识到这个问题，但是还没有找到任何解决方案。

4 个解决方案

#1

Ok originale solution here - Swiss credit website. This works but uses a complicated z-index solution. Here is very simple and improved solution here - Jeyjoo stock image gallery This works in IE6+, firefox, opera, safari and chrome

好的，瑞士信贷网站。这是可行的，但是使用了一个复杂的z-index解决方案。这里有一个非常简单和改进的解决方案——Jeyjoo stock image gallery，它在IE6+、firefox、opera、safari和chrome上运行。

Solution

解决方案

The HTML

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>

The CSS

CSS

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

why it works

为什么它的工作原理

You have to tell IE how the two divs relate to one another.

你得告诉IE这两位女主角是如何相处的。

#2

(not my script) Pretty sure i may have found the answer to this on here, but i cant find it. Either way, this worked great for me...

(不是我的剧本)我很确定我可能在这里找到了答案，但我找不到。不管怎样，这对我都很有效……

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

just make sure your css includes position and z-index so the script can access the values.

只要确保css包含位置和z索引，这样脚本就可以访问这些值。

kudos to whomever came up with this - saved me a whole lot of trouble.

想出这个办法的人都感到很荣幸，这给我省去了许多麻烦。

#3

If I'm not mistaken, IE is not properly inheriting the z-index from the top-nav for the children li items in the menu. That is why the Photos with a z-index of 60 are covering it up. You can do two things here.

如果我没弄错的话，IE没有正确地从菜单上的子li项的顶部导航中继承z索引。这就是为什么z指数为60的照片掩盖了这一点。你可以做两件事。

Eliminate the photo z-index.
消除照片z - index。
Directly specify a z-index of 100 for the sub list, not just the top-nav list.
直接为子列表指定100的z索引，而不仅仅是顶部导航列表。

#4

I see you still havent solved this on. I found a solution here on a submenu - Chkredit - swiss credit website Works in all versions of IE and is light and 100% CSS (no javascript).

我看你还没解决这个问题。我在一个子菜单上找到了一个解决方案——Chkredit - swiss credit网站在IE的所有版本中都有工作，并且是轻的和100%的CSS(没有javascript)。

Basically the problem was that IE does not use z-index correctly. Check the z-index's in the CSS code. Yo will need to put a z-index -1 on the items your menu is hiding behind.

基本上问题是IE没有正确地使用z索引。检查CSS代码中的z索引。你需要在菜单后面隐藏的项目上加上z-index -1。

I working on exactly the same problem for my own image gallery right now (go to "top image" page) - jeyjoo image gallery

我正在为我自己的图片库做同样的工作(到“top image”页面)——jeyjoo图片库

#1