The Dreaded IE7 z-index bug HELP

I know this has been addressed numerous times but I am having a nightmare I have got the dropdowns to be above the images below but when i try to click on or move mouse further down than containing div the menu dropdowns disapear see my css below any help much appreciated:



ul#cssmw {
cursor: default;
list-style-type: none;
margin:0;
padding:0;
z-index:5000;
}
ul#cssmw ul {
cursor: default;
list-style-type: none;
margin:0;
padding:0;
}
ul#cssmw ul li {
background-image: none;
float: none;
}
ul#cssmw li {
background-image: none;
float: left;
padding:0;
position: relative;
white-space: nowrap;
z-index:1000;
}
ul#cssmw li ul {
display: none;
top: 0;
}
ul#cssmw li:hover > ul {
display: block;
position: absolute;
}

ul#cssmw li.hover > ul {
display: block;
position: absolute;
}

ul#cssmw li.current > ul {
position: absolute;
}
ul#cssmw > li {
background-image: none;
}
ul#cssmw > li > a, ul#cssmw > li > a:link {
background-image: url(../../img/divider.png);
background-repeat:no-repeat;
background-position:right;
border-right: none;
color: #003366;;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight:bold;
margin:0;
padding: 16px 10px 18px 10px;
text-decoration: none;
text-transform: uppercase;
outline-style: none;
}
ul#cssmw > li > a:active, ul#cssmw > li > a:focus {
background-color:none;
color: #FFFFFF;
font-weight:bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw > li:hover > a, ul#cssmw > li:hover > a:link {
color: #FFFFFF;
font-weight:bold;
text-decoration: none;
outline-style: none;
text-shadow: 0px 0px 0px #000000;
filter: dropshadow(color=#000000, offx=0, offy=0);
}

ul#cssmw > li.hover > a, ul#cssmw > li.hover > a:link {
color: #003366;
font-weight:normal;
text-decoration: none;
outline-style: none;
text-shadow: 0px 0px 0px #000000;
filter: dropshadow(color=#000000, offx=0, offy=0);
}

ul#cssmw > li.current > a.current, ul#cssmw > li.current > a.current:link {
color: #003366;
font-weight:normal;
text-decoration: none;
outline-style: none;
}
ul#cssmw ul.level-1 {
left: 0;
top: 100%;
}
ul#cssmw ul.level-1 > li {
background-image: none;
}
ul#cssmw ul.level-1 > li > a, ul#cssmw ul.level-1 > li > a:link {
background-color:#003366;
background-image: none;
border-bottom: solid 1px #75828c;
border-right:none;
color: #99C0D9;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
margin:0;
padding: 7px 20px 7px 15px;
text-decoration: none;
outline-style: none;
-webkit-box-shadow: 0px 3px 5px #121112;
-moz-box-shadow: 0px 3px 5px #121112;
box-shadow: 0px 3px 5px #121112;
}
ul#cssmw ul.level-1 > li > a:active, ul#cssmw ul.level-1 > li > a:focus {
background-color: #003366;
color: #99c0d9;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw ul.level-1 > li:hover > a, ul#cssmw ul.level-1 > li:hover > a:link {
background-color: #75828c;
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
outline-style: none;
}

ul#cssmw ul.level-1 > li.hover > a, ul#cssmw ul.level-1 > li.hover > a:link {
background-color: #75828c;
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
outline-style: none;
}

ul#cssmw ul.level-1 > li.current > a.current, ul#cssmw ul.level-1 > li.current > a.current:link {
background-color: #75828c;
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
outline-style: none;
}

post a link where i can see the problem to investigate the cause.

aiprocess/

This is a problem I seem to have with most of the menus created with dropdowns using CSS Menu Writer have a look at this one as well please index2.php

one issue i see is that you have not specified a height or width for the menu items. the behavior you are describing is very common in IE7 when the height and width are not set, you should use a pixel measurement for the height and width of the menu levels for IE7 to work correctly.

Tried that doesn't make any difference I am sure it has something to do with IE7 not recognising z-index but fixing it is another matter. Although it seems to me that its something to do with the containing div as when the mouse goes outside that div the menu goes:


<div id="menu-outer"><img src="img/menu.png" alt="menu-background" width="1024" height="60">
<div id="menu-inner">
<?php require_once("CSSMenuWriter/cssmw/menu.php"); ?>
</div>
<div id="searchbox">
<form name="form1" method="post" action="results.php">
<label>
<input name="ai-search" type="text" id="ai-search" onFocus="if(this.value==this.defaultValue) this.value='';" value="Search">
</label>
<label>
<input type="submit" name="Submit-Btn" id="Submit-Btn" value="GO">
</label>
</form>
</div>
</div>

Allistair -- did you find the problem? I looked using the IE7 mode in IE9 and I can see your dropdowns. . .

HI Mike you can see them ok try going down one of the dropdows and you will see it dissapear

I dont think this is the z-index issue, looking at the source of the menu css, there is still no height or width specified for the menu items, IE 7 does not work correctly if there is no height or width specified. For IE7, there must be a height and width set for the menu items.



for the z-index, you need to specify the position as well, each position has a separate stacking order, so when setting the stacking order using z-index, you need to specify which layer the z-index is to be applied to.

ul#cssmw {
cursor: default;
list-style-type: none;
margin:0;
padding:0;
z-index:5000;
position: relative;
}

I bow down to you Jason, when I gave the menu a height and width I did it to the top level instead of the drop down level. So now I have given the height and width a value which didn't appear to work as the menu was behind everything, but I positioned the outer containing div as relative and gave it a z-index of 5 and the inner menu div as absolute and gave that a z-index of 10 and hey presto it works hallelujah.

Although can you have another look for me as the 1px border I have applied to the bottom of the drop down dosen't appear in ie7 so it replaces it with a gap which will close the menu if you hit it see: aiprocess/

Many thanks Jason I have gone totally grey over this but you have saved me from pulling the rest of my hair out regards Alistair

Any chance of an answer Jason