jquery – 下拉菜单需要显示所有内容,但它位于某个div下面

我有一个下拉菜单,它可以完美地处理除IE6和IE之外的所有内容. 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中的多个div(特色程序 – 左和右),并且jQuery在循环中淡入和淡出每个div)以显示多个项目(淡入淡出) div内两侧的内容(#featured-programs-left& #features-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;
}

你认为它可能导致它没有显示feature-programs-left&中的项目的下拉菜单IE 6/7中的精选程序？

您是否尝试将当前模糊菜单的图片的 z-index设置为0？你有一个我们可以看到的“实时”测试网址吗？或者,基于IE正在正确处理z-index,您是否有足够的余地将下拉菜单的HTML放在页面中的其他元素之后,从而绕过z-index？

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

来自MrTazz的报价：

When running some special JavaScript
it magicaly puts the div in the
background. Uppdate the div and it
comes back farward.

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

编辑：
从布拉德的评论,复制到这里为未来读者的启发：“这帮助我：http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/我设置#header的z索引为2,#content为z-index为1”. – 布拉德(5小时前)

因此,总结一下：IE 6/7中存在z-index错误.为了解决这个问题,明确将菜单前面出现的元素的z-index设置为较低的数字(例如1),并将菜单容器的z-index设置为稍高一些数字(例如2).