Z-Index with IE7 and IE6

[travissmith]

I know this is an old bug with IE7 and IE6 with z-index but for the life of God, I cannot remember how to get around this bug. I will do my best to explain what is happening!

I have been creating a pure CSS menu for a website. I have it working in IE8 and all other CSS 2.1 complient browsers but when I look at it in IE7, the menu works fine for the first level down but after that the first item in the menu shows up on-top like it should but then all the other items in the list except the last 2 are behind the parent. I have tried for days working with a separate IE7 and IE6 style sheet and can't get it to behave properly. For IE6 I am using JQuery because IE6 doesn't support :hover for anything other than a link.

I am going to post the css and the html for the menu in another post!

Thanks,

Travis Smith

[travissmith]

<div id="main-menu">
<div id="main-menu-top"></div>
<div id="main-menu-middle">
<ul id="menu" class="main-menu">
<li class="menuparent MenuText MenuLi"><a href="index.php">Home</a></li>
<li class="menuparent MenuText MenuLi"><a href="index.php?PageID=47">News</a>
<ul class="mainmenuul">
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot"><a href="index.php?PageID=49">2010</a>
<ul class="mainmenuul">
<li class="menuparent MenuTextSub MenuLiSub"><a href="index.php?PageID=50">January</a></li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubFinal"><a href="index.php?PageID=51">February</a></li>
</ul>
</li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot MenuLiSubFinal"><a href="index.php?PageID=48">2009</a>
<ul class="mainmenuul">
<li class="menuparent MenuTextSub MenuLiSub"><a href="index.php?PageID=8">May</a></li>
<li class="menuparent MenuTextSub MenuLiSub"><a href="index.php?PageID=7">June</a></li>
<li class="menuparent MenuTextSub MenuLiSub"><a href="index.php?PageID=6">July</a></li>
<li class="menuparent MenuTextSub MenuLiSub"><a href="index.php?PageID=5">August</a></li>
<li class="menuparent MenuTextSub MenuLiSub"><a href="index.php?PageID=4">September</a></li>
<li class="menuparent MenuTextSub MenuLiSub"><a href="index.php?PageID=3">October</a></li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubFinal"><a href="index.php?PageID=2">November</a></li>
</ul>
</li>
</ul>
</li>
<li class="menuparent MenuText MenuLi"><a href="index.php?PageID=9">Schedule</a>
<ul class="mainmenuul">
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot"><a href="index.php?PageID=16">January</a></li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot"><a href="index.php?PageID=17">February</a></li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot"><a href="index.php?PageID=18">March</a></li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot"><a href="index.php?PageID=19">April</a></li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot"><a href="index.php?PageID=20">May</a></li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot"><a href="index.php?PageID=21">June</a></li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot"><a href="index.php?PageID=22">July</a></li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot"><a href="index.php?PageID=23">August</a></li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot"><a href="index.php?PageID=24">September</a></li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot"><a href="index.php?PageID=25">October</a></li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot"><a href="index.php?PageID=26">November</a></li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot MenuLiSubFinal"><a href="index.php?PageID=27">December</a></li>
</ul>
</li>
<li class="menuparent MenuText MenuLi"><a href="index.php?PageID=10">Photos</a>
<ul class="mainmenuul">
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot"><a href="index.php?PageID=28">2010</a>
<ul class="mainmenuul">
<li class="menuparent MenuTextSub MenuLiSub"><a href="index.php?PageID=32">Basketball</a></li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubFinal"><a href="index.php?PageID=33">Snow Sleds</a></li>
</ul>
</li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot"><a href="index.php?PageID=29">2009</a>
<ul class="mainmenuul">
<li class="menuparent MenuTextSub MenuLiSub"><a href="index.php?PageID=34">Baseball</a></li>
<li class="menuparent MenuTextSub MenuLiSub"><a href="index.php?PageID=35">Demolition Derby</a></li>
<li class="menuparent MenuTextSub MenuLiSub"><a href="index.php?PageID=36">Football</a></li>
<li class="menuparent MenuTextSub MenuLiSub"><a href="index.php?PageID=37">Hockey</a></li>
<li class="menuparent MenuTextSub MenuLiSub"><a href="index.php?PageID=38">Pulling</a></li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubFinal"><a href="index.php?PageID=39">Snow Sleds</a></li>
</ul>
</li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot"><a href="index.php?PageID=30">2008</a>
<ul class="mainmenuul">
<li class="menuparent MenuTextSub MenuLiSub"><a href="index.php?PageID=40">Demolition Derby</a></li>
<li class="menuparent MenuTextSub MenuLiSub"><a href="index.php?PageID=41">Freestyle Motorcross</a></li>
<li class="menuparent MenuTextSub MenuLiSub"><a href="index.php?PageID=42">Pulling</a></li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubFinal"><a href="index.php?PageID=43">Snowcross</a></li>
</ul>
</li>
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot MenuLiSubFinal"><a href="index.php?PageID=31">2007</a>
<ul class="mainmenuul">
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubFinal"><a href="index.php?PageID=44">Pulling</a></li>
</ul>
</li>
</ul>
</li>
<li class="menuparent MenuText MenuLi"><a href="index.php?PageID=11">Videos</a>
<ul class="mainmenuul">
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubRoot MenuLiSubFinal"><a href="index.php?PageID=45">2009</a>
<ul class="mainmenuul">
<li class="menuparent MenuTextSub MenuLiSub MenuLiSubFinal"><a href="index.php?PageID=46">Pulling</a></li>
</ul>
</li>
</ul>
</li>
<li class="menuparent MenuText MenuLi"><a href="index.php?PageID=12">Links</a></li>
<li class="menuparent MenuText MenuLi"><a href="index.php?PageID=13">About Us</a></li>
<li class="menuparent MenuText MenuLi"><a href="index.php?PageID=14">Advertise</a></li>
<li class="menuparent MenuText MenuLi"><a href="index.php?PageID=15">Contact</a></li>
</ul>
<img src="Images/Main-Logo.png" alt="KC Photo and Video Logo" class="main-menu-image"/>
</div>
<div id="main-menu-bottom"></div>
</div>

[travissmith]

MENU SETTINGS CSS

#main-menu {
position: relative;
width: 10px;
height: auto;
left: 50px;
text-align: left;
float: left;
z-index: 1;
left: 5px;
}

#main-menu-top {
position: relative;
background: url(../TemplateImages/Main-Menu-Top.png);
width: 150px;
height: 32px;
top: 10px;
}

#main-menu-middle {
position: relative;
background: url(../TemplateImages/Main-Menu-Middle.png);
background-repeat: repeat-y;
width: 150px;
height: auto;
min-height: 100px;
top: -6px;
padding-bottom: 10px;
}

#main-menu-bottom {
position: relative;
background: url(../TemplateImages/Main-Menu-Bottom.png);
width: 150px;
height: 58px;
top: -6px;
}

#menu {
position: relative;
width: 100px;
}

.main-menu a:link {
color: #FFCC00;
text-decoration: none;
}

.main-menu a:visited {
color: #FFCC00;
text-decoration: none;
}

.main-menu a:hover {
text-decoration: none;
color: #FFFFFF;
}

.main-menu a:active {
text-decoration: none;
}

.MenuLi {
list-style-type: none;
position: relative;
left: -15px;
padding-right: 10px;
min-width: 10px;
width: auto;
}

.MenuLiSub {
list-style-type: none;
position: relative;
left: 5px;
text-indent: 20px;
top: 24px;
background: url(../TemplateImages/Main-Menu-SubMenu-Middle.png);
background-repeat: repeat-y;
overflow: visible;
min-width: 50px;
width: auto;
white-space: nowrap;
text-align: left;
height: auto;
}

.MenuLiSubFinal {
background: url(../TemplateImages/Main-Menu-SubMenu-Bottom.png);
background-repeat: no-repeat;
background-position: bottom;
min-height: 64px;
}

.MenuLiSubRoot {

}

.mainmenuul {
position: relative;
top: -20px;
background: url(../TemplateImages/Main-Menu-SubMenu-Top.png);
background-repeat: no-repeat;
background-position: top;
padding-left: 0px;
padding-right: 10px;
left: 80px;
width: 150px;
height: auto;
z-index: 10;
}

.main-menu-image {
position: relative;
top: 30px;
left: 15px;
z-index: -1;
}

[travissmith]

MENU SETTINGS IN IE7 STYLE SHEET
#main-menu-middle {
top: 10px;
}

#main-menu-bottom {
top: 10px;
}

.MenuLi {
left: 20px;
}

.MenuLiSub {
background-repeat: no-repeat;
margin-top: 0px;
margin-bottom: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
padding-top: 0px;
padding-bottom: 0px;
vertical-align: bottom;
}

.MenuLiSubRoot {
margin-bottom: -6px;
}

[travissmith]

MENU CODING CSS - HOVERING, ETC

.block-main-menu {
line-height: normal;
z-index: 10;
}

ul.main-menu,
ul.main-menu ul {
z-index: 0;
position: relative;
margin-left: 0px;
}

ul.main-menu li {
position: relative;
}

ul.main-menu a {
display: block;
}

ul.main-menu ul {
position: absolute;
visibility: hidden;
}

ul.main-menu li.over ul {
visibility: visible;
}

ul.main-menu ul li {
display: block;
}

ul.main-menu:after {
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Show submenus when over their parents. */
ul.main-menu li:hover ul,
ul.main-menu li.menuparent li:hover ul,
ul.main-menu li.menuparent li.menuparent li:hover ul,
ul.main-menu li.menuparent li.menuparent li.menuparent li:hover ul,
ul.main-menu li.menuparent li.menuparent li.menuparent li.menuparent li:hover ul,
ul.main-menu li.over ul,
ul.main-menu li.menuparent li.over ul,
ul.main-menu li.menuparent li.menuparent li.over ul,
ul.main-menu li.menuparent li.menuparent li.menuparent li.over ul,
ul.main-menu li.menuparent li.menuparent li.menuparent li.menuparent li.over ul{
visibility: visible;
z-index: 100;
}

/* Hide sub-menus initially. */
ul.main-menu li:hover ul ul,
ul.main-menu li:hover ul ul ul,
ul.main-menu li:hover ul ul ul ul,
ul.main-menu li:hover li:hover ul ul,
ul.main-menu li:hover li:hover ul ul ul,
ul.main-menu li:hover li:hover ul ul ul ul,
ul.main-menu li:hover li:hover li:hover ul ul,
ul.main-menu li:hover li:hover li:hover ul ul ul,
ul.main-menu li:hover li:hover li:hover ul ul ul ul,
ul.main-menu li:hover li:hover li:hover li:hover ul ul,
ul.main-menu li:hover li:hover li:hover li:hover ul ul ul,
ul.main-menu li:hover li:hover li:hover li:hover ul ul ul ul,
ul.main-menu li.over ul ul,
ul.main-menu li.over ul ul ul,
ul.main-menu li.over ul ul ul ul,
ul.main-menu li.over li.over ul ul,
ul.main-menu li.over li.over ul ul ul,
ul.main-menu li.over li.over ul ul ul ul,
ul.main-menu li.over li.over li.over ul ul,
ul.main-menu li.over li.over li.over ul ul ul,
ul.main-menu li.over li.over li.over ul ul ul ul,
ul.main-menu li.over li.over li.over li.over ul ul,
ul.main-menu li.over li.over li.over li.over ul ul ul,
ul.main-menu li.over li.over li.over li.over ul ul ul ul {
visibility: hidden;
}

[travissmith]

I forgot to post my doctype I am using!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">