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使用z-index执行... weird things。如果你也想要定位IE7，你可以这样做（从this page取得CSS黑客）：

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

Answer 2

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

下拉菜单在IE 7/8/9的#main div背景下

2 个答案: