gpt4 book ai didi

jquery - 下拉菜单需要显示在所有内容之上,但它在某个 div 下面

转载 作者:搜寻专家 更新时间:2023-10-31 22:36:05 30 4
gpt4 key购买 nike

我有一个下拉菜单,它适用于除 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 的两侧(#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 中不显示特色节目左侧和特色节目右侧元素的下拉菜单?

最佳答案

您是否尝试过设置 z-index当前遮挡您的菜单的图片的数量,比方说,0?您有我们可以查看的“实时”测试 URL 吗?或者,在 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?

编辑:摘自 Brad 的评论,复制于此以启迪 future 的读者:“这帮助了我: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)。

关于jquery - 下拉菜单需要显示在所有内容之上,但它在某个 div 下面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/501227/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com