隐藏在 IE7 内容后面的 CSS 下拉菜单 [英] CSS Dropdown menu hidden behind content IE7

问题描述

我有一个下拉 css 菜单，当在 IE7 中查看时，它会隐藏在主页内容后面.我试过更改 z-index 值，但没有运气.我也尝试过本网站其他主题的建议，但都没有奏效.

可以在此处找到该页面:www.melbournedodgeball.com.au/dodgeball2012/about

任何帮助将不胜感激

解决方案

CSS 规范关于 Z-index 的段落 说新的堆叠上下文只为具有非 auto 的 z-index 的定位内容创建.

您在 #nav 中有 li 和 position:relative，显然 IE 将其解释为新的堆栈上下文.>

试试这个:

#nav li {显示:块；位置:相对；z-索引:1；//此时强制IE识别堆栈}

I have a dropdown css menu that gets gets hidden behind the main page content when viewed in IE7. I've tried changing z-index values but have had no luck. I've also tried suggestions in other topics from this site but none have worked.

the page can be found here: www.melbournedodgeball.com.au/dodgeball2012/about

any help would be greatly appreciated

解决方案

The CSS spec's paragraph on Z-index says that new stacking context is only created for positioned content with a z-index other than auto.

You have the li inside #nav with a position:relative, an apparently IE interprets this as a new stacking context.

Try this:

#nav li {
    display: block;
    position: relative;
    z-index: 1;         // force IE to recognize stack at this point
}

这篇关于隐藏在 IE7 内容后面的 CSS 下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！