下拉菜单需要显示所有内容，但它位于某个 div 下方

Question

我有一个下拉菜单，它在除 IE6 和 IE7 之外的所有设备上都能完美运行。

• Here it is in the Safari/Firefox browsers
• Here is how it looks in IE6 & IE7

这是 IE 6/7 下隐藏的 div 的 CSS

#featured-programs-left img,
#featured-programs-right img{
    overflow:auto;
    border:0;
}

#featured-programs-left,
#featured-programs-right {
    height:625px;
    float:left;
    overflow:auto;
    clear:left;
    clear:right;
    width:100%;
}

#featured-programs-left div,
#featured-programs-right div {
    overflow:auto;
    clear:left;
    clear:right;
    width:352px;
    height:345px;
}

#featured-programs-left {
    float:left;
}

#featured-programs-right {
    float:right;
}

这里是用于显示多个项目的 jQuery（在源代码中，您将在每个主 div（featured-programs-left 和 -right）中看到多个 div，并且 jQuery 在循环中淡入淡出每个 div） （淡入淡出项目）在 div 的两侧（#featured-programs-left & #featured-programs-right）

<script type="text/javascript">
$(document).ready(function() {
    $('#featured-programs-left').cycle({ 
        fx:     'fade', 
        speed:  'slow',
        timeout: 15000,
        next:   '#next2',
        prev:   '#prev2' 
    });
});

$(document).ready(function() {
    $('#featured-programs-right').cycle({ 
        fx:     'fade', 
        speed:  'slow',
        timeout: 21000,
        next:   '#next3',
        prev:   '#prev3' 
    });
});
</script>

这里是快速链接的 CSS（快速链接是链接的下拉菜单）

#header-nav-top li#quicklinks a:link,
#header-nav-top li#quicklinks a:visited,
#header-nav-top li#quicklinks a:active {
    padding-left: .9em;
    background: transparent url('/site/images/quicklinks_bullet.gif') no-repeat 0em .5em;
}

#header-nav-top li#quicklinks.hover {
    position: relative;
}

#header-nav-top li#quicklinks ul {
    position: absolute;
    display: none;
    xleft: -9999em;
    top: 14px;
    width: 142px;
    padding:5px 2px 5px 5px;
    z-index: 90;
    margin: 0px;
    background-color: #00693E;
    xborder: 1px solid #FDBE2F;
    xborder-width: 0px 1px 1px;
}

#header-nav-top li#quicklinks:hover ul,
#header-nav-top li#quicklinks.hover ul {
    left: 0px;
    display: block;
}

#header-nav-top li#quicklinks ul li {
    background: transparent none;
    float: none;
    margin: 0px 0px 0px;
    line-height: 1.4em;
    display: block;
    border:1px solid #00693E;
}

#header-nav-top li#quicklinks ul li a:link,
#header-nav-top li#quicklinks ul li a:visited,
#header-nav-top li#quicklinks ul li a:active {
    color: #fff;
    display: block;
    text-decoration: none;
    background: transparent none;
}

#header-nav-top li#quicklinks ul li a:hover {
    color: #C26B1A;
    background: transparent url('/site/images/bullet_link.gif') no-repeat 0% 6px;
}

您认为可能是什么原因导致它在 IE 6/7 中的特色程序左侧和特色程序右侧中的项目上不显示下拉菜单？

Answer 1

您是否尝试过将当前遮挡菜单的图片的z-index 设置为0？您有我们可以查看的“实时”测试 URL 吗？或者，基于 IE 对 z-index 的处理不正确，您是否有余地将下拉菜单的 HTML 放置在页面中的其他元素之后，从而绕过 z-index？

编辑：啊，显然有一个错误。这个link 可能会解释，如果不是真的有帮助的话......

引自 MrTazz：

当运行一些特殊的 JavaScript 它神奇地将div放入 背景。更新 div 和它 回来很远。

所以也许尝试在页面显示之前以某种方式更新下拉菜单 div？

编辑： 摘自 Brad 的评论，复制到此处以启发未来的读者：“这帮助了我：http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/ 我将 #header 的 z-index 设置为 2，将 #content 的 z-index 设置为 1。” – 布拉德（5 小时前）

所以，总结一下：IE 6/7 中有一个 z-index 错误。要解决这个问题，请将出现在菜单前面的元素的 z-index 显式设置为较低的数字（例如 1），并将菜单容器的 z-index 设置为稍高一些数字（例如 2）。

Answer 2

我将#content z-index 设置为 1

并设置标题的z-index，也就是下拉导航所在的位置为2。