IE7 CSS超级菜单问题

下面的导航菜单代码与IE8和Firefox，Chrome等一起出色地工作。但是，我得到一个与IE7错误。IE7 CSS超级菜单问题

我的megamenu下拉菜单无法在图像上显示。注意在IE7中，当我将鼠标悬停在黄色区域上时，图像（谷歌搜索图像）在z-index中的位置如何显得更高。为什么是这样？

供参考，在这里是我目前使用的情况下，如果有人想试试这对他们的最终代码：

<!DOCTYPE html> 
<!--[if IE 6]> 
<html id="ie6" dir="ltr" lang="en-US"> 
<![endif]--> 
<!--[if IE 7]> 
<html id="ie7" dir="ltr" lang="en-US"> 
<![endif]--> 
<!--[if IE 8]> 
<html id="ie8" dir="ltr" lang="en-US"> 
<![endif]--> 
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!--> 
<html dir="ltr" lang="en-US"> 
<!--<![endif]--> 
<head> 
<meta charset="UTF-8" /> 
<meta name="viewport" content="width=device-width" /> 
<title>CSS | IE7 Issue</title> 
<style type="text/css"> 
.row {position:relative; margin-left:-10px;} 
.gu12 .row {width: 960px;} 

li {padding:0;margin:0} 
a {padding:0;margin:0} 

.col {padding-left:10px; float:left; position:relative;} 
.gu12{width: 950px;} 

#nav3 ul {float:left;} 
#nav3 ul li {list-style-type:none;float:left} 
#nav3 ul li a {display:block;line-height:40px;} 

#nav3 {padding-left:1px;height:40px} 
#nav3 a span {height:40px;padding:0;margin:0;margin-top:0px!important;position: absolute; width 100%;height:100%} 


a#programme-options {height:40px;width:177px;position: relative;} 
a#programme-options span {background-position:-159px 0px;position: absolute;width: 100%;height: 100%;} 
a#programme-options span:hover {background-position:-159px -160px!important} 
a#programme-options.active span, a#programme-options:active {height:40px;width:177px;margin-top:0px!important;background-position:-159px -200px} 

#nav {padding-top:15px;padding-bottom:0px;} 
#nav {margin-top:45px;padding-top:0px;padding-bottom:0px;} 
#nav ul {float:left;width:950px;} 
#nav ul li {list-style-type:none;float:left} 
#nav ul li a {display:block;line-height:40px;} 

#top .avia_mega ul ul li, #top .avia_mega >li >ul li{ 
color:#777; 
background-image: url(menu_arrow.png); 
background-position: -20px -11px; 
*background-position: -50px -51px; /*ie7 pseudo fix of bg images*/ 
background-repeat: no-repeat; 
} 
#top .avia_mega{height:40px; line-height:40px; padding:0; left:1px; bottom:0px; position:absolute; z-index:100} 
.avia_mega, .avia_mega ul{margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:40px; z-index:5} 
#top .avia_mega li{float:left; position:relative; z-index:20; margin-left:0} 
#top .avia_mega ul a:hover{text-decoration:underline} 
#top .avia_mega div ul{line-height:21px} 
.avia_mega1, .avia_mega2, .avia_mega3, .avia_mega4, .avia_mega5{position:absolute; display:none; top:0px; left:0; padding:8px} 
#top .avia_mega div ul li{width:162px; padding:15px} 

#top .avia_mega > li > ul, #top .avia_mega > li > ul ul {background:#4d0702} 
#top .avia_mega > li > ul li {background:#990E03} 

#top .avia_mega div ul{float:left} 
#top .avia_mega div ul ul{padding:0 0 10px 0} 
#top .avia_mega div ul ul ul{padding:2px 0 0} 
#top .avia_mega div ul li li{width:139px; float:left; clear:both; padding:3px 0 3px 23px; margin:0} 
#top .avia_mega div ul li li li{width:116px} 
#top .avia_mega div ul li li li li{width:93px} 
#top .avia_mega ul a{text-align:left; display:inline; line-height:21px; padding:0; height:auto; float:none; font-size:1em} 

#top .avia_mega div ul ul .avia_mega_text_block{background:none; padding:3px 0 0 0; margin:0; font-size:1em; line-height:1.7em} 
#top .avia_mega div ul .avia_mega_hr{width:100%; height:20px; clear:both; padding:0} 
#top .avia_mega >li >ul, #top .avia_mega >li >ul ul{position:absolute; display:none; width:203px; top:40px; left:0px; padding:8px} 
#top .avia_mega >li >ul ul li:first-child{left:-10px; padding-left:0; position:relative; width:234px} 
#top .avia_mega >li >ul ul li:first-child a{position:relative; left:44px} 
#top .avia_mega >li >ul a{width:170px; display:block; padding:2px 20px 2px 0;color:#fff;font-weight:normal!important} 
#top .avia_mega >li >ul li{padding:3px 0 3px 14px} 
#top .avia_mega >li >ul ul{border-top:medium none; left:224px; top:-8px} 
#top .avia_mega >li:hover >ul ul, #top .avia_mega >li>ul li:hover ul ul, #top .avia_mega >li>ul ul li:hover ul ul, #top .avia_mega >li>ul ul ul li:hover ul ul, #top .avia_mega >li>ul ul ul ul li:hover ul ul{display:none} 
#top .avia_mega >li:hover >ul, #top .avia_mega >li >ul li:hover ul, #top .avia_mega >li >ul ul li:hover ul, #top .avia_mega >li >ul ul ul li:hover ul, #top .avia_mega >li >ul ul ul ul li:hover ul, #top .avia_mega >li >ul ul ul ul ul li:hover ul{display:block} 
</style> 

</head> 

<body id="top"> 

    <div class="row"> 
     <div class="col gu12 navarea"> 
     <div id="nav3"> 
     <ul id="menu-main-menu" class="avia_mega sf-menu" style="background:red"> 
       <li><a href="/" id="home" class="home "><span></span>Home</a></li> 
       <li><a href="#" id="programme-options" class=""><span style="background:yellow"></span>Tester</a>     
       <ul>   
        <li><a href="#">Test Link</a></li> 
        <li><a href="#">Test Link</a></li> 
        <li><a href="#">Test Link</a></li> 
        <li><a href="#">Test Link</a></li> 
        <li><a href="#">Test Link</a></li> 
       </ul> 
       </li> 
     </ul> 

     </div> 
     </div> 

    </div> 
    <div class="row"> 
     <div class="col gu12"> 
     <img src="http://indiawebsearch.com/files/image/thumb_googlelogo.jpg" class="main-img" style="float:left" />    
     </div> 
    </div> 

</body> 

</html>

来源

2011-09-25 michaelmcgurk

解决的问题:)

我改变了我的HTML ：

<div class="row2"> 
    <div class="col2 gu12"> 
    <img src="http://indiawebsearch.com/files/image/thumb_googlelogo.jpg" />    
    </div> 
</div>

它会出现行和col类不喜欢IE7。

谢谢你看看.....有人吗？

来源

2011-09-25 16:34:42 michaelmcgurk

IE7 CSS超级菜单问题

回答

相关问题