Question

导航菜单的以下代码与IE8和Firefox，Chrome等工作表现非常出色。但是，我收到了IE7的错误。

我的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>

Answer 1

问题已解决：）

我将HTML更改为：

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

看起来行和col类不喜欢IE7。

感谢您看一下.....任何人？

IE7 CSS Mega菜单问题

1 个答案: