我有一个 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>