我有一个CSS菜单，其下拉部分显示子菜单。子菜单显示在IE8中的另一个DIV后面。在IE9，Chrome，FF和Safari中它正确显示。
我该如何纠正？
非常感谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #09F;
background-repeat: no-repeat;
}
p {
margin:0
}
.darrobric #white-header-bg {
position: relative;
width: 100%;
margin: 0 auto;
border: 0px solid #000000;
text-align: left;
background: #ffffff;
height: 100px;
}
.darrobric #bg {
position: relative;
width: 100%;
margin: 0 auto;
border: 0px solid #000000;
text-align: left;
}
.darrobric #header2 {
height: 100px;
background: #ffffff;
width: 960px;
position: relative;
margin: 0 auto;
}
.darrobric #logo {
position: absolute;
left: 0;
width: 240px;
}
.darrobric #nav {
position: absolute;
top: 31px;
right: -5px;
width: 730px;
background: #ffffff;
font-size: 14.5px;
font-family: Arial, Helvetica, sans-serif;
color: #0059a2;
font-weight: bold;
text-align: right;
margin-right: 5px;
}
.darrobric #buttons {
position: absolute;
right: 0px;
width: 300px;
background: #ffffff;
font-size: 14.5px;
font-family: Arial, Helvetica, sans-serif;
color: #0059a2;
font-weight: bold;
text-align: right;
top: 10px;
}
.darrobric #slider-container {
height: 332px;
background: #00569c;
padding: 0;
margin-bottom: 25px;
}
.darrobric #container {
position: relative;
width: 960px;
margin: 30px auto;
border: 0px solid #000000;
text-align: left;
height: 100%;
}
.darrobric #slider-bg {
background-image: url(trans.png);
padding: 10px 10px 10px 10px;
margin-bottom: 25px;
height: 333px;
position: static;
}
.darrobric #map-container {
padding: 0;
margin-bottom: 25px;
width: 608px;
}
.darrobric #mainContent {
margin: 0 200px;
padding: 0 10px;
}
.darrobric #box-text {
padding: 0px;
width: 260px;
line-height: 18px;
}
.darrobric #box-image {
padding: 0px;
width: 150px;
right: 0px;
margin-top: -150px;
margin-left: 270px;
height: 150px;
}
.darrobric #footer-small-logo {
padding: 0px 0px 0px 840px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #565656;
height: 35px;
line-height: 40px;
margin-top: -45px;
}
.darrobric #SLIDESTEXT{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFF;
margin-left: 665px;
margin-top: -305px;
margin-right: 20px;
line-height: 22px;
}
.darrobric #BUTTON {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFF;
margin-left: 665px;
margin-top: 25px;
margin-right: 20px;
line-height: 22px;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.one {
overflow:hidden;
height:100%;
float: left;
width: 960px;
}
/* horizontal menus */
#nav, .nav, #nav .nav li {
margin:0px;
padding:0px;
z-index: 5000;
}
#nav li {
float:right;
display:inline;
cursor:pointer;
list-style:none;
padding:5px 18px 5px 0px;
border:0px #000 solid;
position:relative;
z-index: 1000;
background-color: #FFF;
}
#nav li ul.first {
left:-1px;
top:100%;
}
li, li a {
color:#00569C;
text-decoration:none;
text-align: left;
}
#nav .nav li {
width:100%;
text-indent:10px;
line-height:30px;
margin-right:10px;
border-top:0px #000 solid;
border-bottom:0px #000 solid;
border-left:none;
border-right:none;
onclick="return true"
;
background-color: #FFF;
}
#nav li a {
display:block;
width:inherit;
height:inherit;
}
ul.nav {
display:none;
}
#nav li:hover > a, #nav li:hover {
color:#00569C;
}
li:hover > .nav {
display:block;
position:absolute;
width:200px;
top:-2px;
left:30%;
z-index:1000;
border:0px #000 solid;
}
li:hover {
position:relative;
z-index:2000;
}
#basic li {
color:#000;
}
</style>
</head>
<body class="darrobric">
<div id="white-header-bg">
<div id="header2">
<div id="logo"></div>
<div id="nav">
<ul id="nav">
<li>Heading 5</li>
<li>
<a href="#">Heading 4</a>
<ul class="nav first">
<li>
<a href="our-locations.html">111</a>
</li>
<li>
<a href="career-paths.html">222</a>
</li>
<li>
<a href="#">333</a>
</li>
<li>
<a href="#">444</a>
</li>
</ul>
</li>
<li>
<a href="companies-and-brands.html">Heading 3</a>
</li>
<li>
<a href="latest-news.html">Heading 2</a>
</li>
<li>
<a href="#">Heading 1</a>
<ul class="nav first">
<li>
<a href="introducing-Lactalis.html">555</a>
</li>
<li>
<a href="our-history.html">666</a>
</li>
<li>
<a href="companies-and-brands.html">777</a>
</li>
<li>
<a href="our-locations.html">888</a>
</li>
<li>
<a href="http://www.youtube.com">999</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="container">
<div class="one">
<div id="slider-bg">
<div id="slider-container">
<IMG name="SLIDESIMG" src="blank.png" width="640"
height="332" alt="Slideshow image">
<DIV ID="SLIDESTEXT" STYLE="position: relative;">Elit
praesent fringilla viverra is sapien vel vehicula
curabiturin lectus sem, nec eleifend est. Aliquam
erat ion volutpat aliquam et lorem libero, non
fringillbh ipsum dolor sit amet consectetuer
adipiscing elit, sed diam nonummy nibhen euismod
tincidunt ut laoreet dolore sed diam nonummy
nibhen.</DIV>
</IMG>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
对于IE，主要顶级div元素需要比它位于顶部的z-index元素更高，或者您尝试坐在其上的元素将隐藏在其下方。如果这是有道理的。
您需要将其添加到您的代码中：
#container{
z-index:10;
position:relative;
}
#white-header-bg{
z-index:11;
position:relative;
}
另外我注意到你在一些地方有一个导航ID。该ID应仅使用一次，例如id="nav"如何class="nav"可以多次使用