隐藏在IE7内容后面的CSS下拉菜单

Question

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

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

任何帮助将不胜感激

Answer 1

CSS spec's paragraph on Z-index表示只为z-index不是auto的定位内容创建新的堆叠上下文。

li里面有#nav position:relative，显然IE将其解释为新的堆叠上下文。

试试这个：

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

Answer 2

您需要添加

position:relative;

到<ul>

相对于同一堆叠上下文中的所有其他元素指定Z-Index。你可以有一个100的Z-Index，但如果元素属于完全不同的堆叠上下文，它不会有一点区别。

Answer 3

我已经测试了这段代码，它确实可行 请为IE7设置此css

#menu {position:relative; z-index:100;}