サブメニューを表示するドロップダウンセクションを持つ 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>