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

Question

这是指向域 http://linenwoods.com 的链接我正在努力。我打算将导航列表项放在标题上，但是当下拉菜单实现时，我很确定它会像您当前看到的那样位于#main div 下。有什么简单的方法可以解决这个问题吗？我无法从谷歌搜索中找到与此相关的任何内容.. 希望有人能帮助我。下面是相关的 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 确实... weird things使用 z-index。如果你也想针对 IE7，你可以这样做(CSS hack 取自 this page ):

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