IE6,IE7だとメニューが写真の裏に表示される
こんばんは。コーディング作業をしており、ヘッダーにドロップメニュー(多階層のメニューバー)を設置し、その下に写真を置いたのですが、メニューをマウスオーバーし、2階層目のカテゴリが出てきた時に、IE6.IE7だと写真の裏に隠れてしまいます。
※ＩＥ8、ＦＦ、Ｍａｃだと写真の前にちゃんと表示されます。
ソースを添付しますので、どこがいけないかご指摘していただけないでしょうか。
よろしくお願いいたします。
[HTMLソース]
<!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" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script type="text/javascript" src="superfish.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery('ul#nav').superfish();
});
</script>
</head>
<body>
<div id="container">
<div id="header" class="clearfix">
<div id="menuBottom" class="clear">
<ul id="nav" class="clearfix">
<li><a href="#"><img src="" alt="" width="88" height="29" /></a>
<ul>
<li><a href="#aa">menu item that is quite long</a></li>
<li class="current"><a href="#ab">menu item</a>
<ul>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">short</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
</ul>
</li>
</ul>
</div><!--#menuBottom END-->
</div>
</div><!--#header END-->
<br /><br /><br /><br />
<div id="contents">
<div id="slide" class="fltL">
<div id="slide_body">
<ul>
<li style="margin-left:300px;"><img src="" width="622" height="461" alt="" /></li>
</ul>
</div><!--#slide_body END-->
</div>
<!--#slide END-->
</div><!--#container END-->
</body>
</html>
[上のhtmlに読み込まれているＣＳＳ（style.css）]
#header {
width:950px;
margin:0 auto;
padding-top:19px;
z-index:100;
}
#menuBottom {
float:right;
z-index:0;
}
#container {
width:100%;
text-align: left;
}
/*** ドロップメニュのＣＳＳ ***/
ul li {
margin:0;
padding:0;
}
#nav ul {
position:absolute;
top:-999em;
width:10em; /* left offset of submenus need to match (see below) */
}
#nav ul li {
width:100%;
height:100%;
}
#nav li:hover {
visibility:inherit; /* fixes IE7 'sticky bug' */
}
#nav li {
float:left;
position:relative;
}
#nav li:hover ul,
#nav li.sfHover ul {
left:0;
top:2.5em; /* match top ul list item height */
z-index:99;
_z-index:0;
}
ul#nav li:hover li ul,
ul#nav li.sfHover li ul {
top:-999em;
}
ul#nav li li:hover ul,
ul#nav li li.sfHover ul {
left:10em; /* match ul width */
top:0;
}
ul#nav li li:hover li ul,
ul#nav li li.sfHover li ul {
top:-999em;
}
ul#nav li li li:hover ul,
ul#nav li li li.sfHover ul {
left:10em; /* match ul width */
top:0;
}
/*** DEMO SKIN ***/
#nav {
float:left;
}
#nav ul li a {
display:block;
position:relative;
padding:0.75em 1em;
border-left:1px solid #fff;
border-top: 1px solid #CFDEFF;
text-decoration:none;
height: 100%;
z-index:15;
}
#nav a, #nav a:visited { /* visited pseudo selector so IE6 applies text colour*/
color:#13a;
}
#nav li li{
background:#AABDE6;
}
/*** 画像部分のＣＳＳ ***/
#slide {
width:624px;
position:relative;
}
#slide_header {
position:absolute;
top:0px;
left:0px;
width:624px;
height:7px;
z-index:2;
background: url(slide_header.png) no-repeat;
}
#slide_body {
background: url(slide_body.gif) repeat-y 0px 0px;
width:624px;
margin:auto;
}
#slide_body img {
margin:auto;
}
お礼
＞「:hover，:active疑似クラスは，始点アンカー（href属性を持つa要素）と組み合わせた場合にのみ効果を持つ。」 確かにこれでは不可能ですね。ＣＳＳのみでのポップアップメニューはあきらめます。 ご回答いただきどうもありがとうございました。