The following code for a navigation menu works brilliantly with IE8 and Firefox, Chrome etc. However, I am getting a error with IE7.
My megamenu dropdown can’t display over an image. Notice in IE7 how the image (google search image) appears higher in the z-index when I hover over the yellow area. Why is this?
For reference, here is the code which I am currently using in case if anybody want to try this on their end:
<!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>
Issue resolved 🙂
I changed my HTML to:
It would appear row and col classes don’t like IE7.
Thanks for taking a look…..anyone?