下拉菜单位于IE 7 / 8 / 9中的 #main div背景下

Question

这是我正在处理的域 http://linenwoods.com 的链接。我将在标题上放置导航列表项，但是当实现下拉菜单时，我很确定它会像您目前看到的那样位于 #maindiv 下。有什么简单的解决方法吗？我无法从谷歌搜索中找到与此相关的任何内容..希望有人能帮助我。以下是相关的 CSS ..我尝试使用z-index但没有运气，因为我被告知IE8渲染得很奇怪。如果您有时间，请点击IE链接并留下回复..我正在尝试尽可能跨浏览器兼容，并且已经处于一个非常可悲的开始。任何帮助将不胜感激:)

body { 
background-image:url('Background1.jpg');
background-position: center;
height: 100%;
margin: 0;
padding: 0;
opacity: 0.8;
filter: alpha(opacity=80);
}
#main {
width : 1010px;
height: 1315px;
background-color: white;
margin-top: 15px;
filter: alpha(opacity=80);
}
header {
width: 1010px;
height: 230px;
background-color: white;
margin: 0 auto;
margin-top: 15px;
filter: alpha(opacity=80);
}
footer {
width: 1010px;
height: 230px;
background-color: white;
margin: 15px 0 15px 0;
filter: alpha(opacity=80);
}

Answer 1

应用此 CSS（仅适用于 IE8 和 9）：

ul.nav {
  position: relative;
  z-index: 2; /* 2 or higher */
}

IE7 确实...z-index的奇怪事情.如果你也想以IE7为目标，你可以这样做（CSS黑客取自此页面）：

ul.nav {
  position: relative;
  position: absolute !ie7; /* For IE7 only */
  z-index: 2; /* 2 or higher */
}

Answer 2

使用 z-index 仅适用于定位的元素。当你测试zindex的东西时，你的元素是绝对的还是相对的？