IE ruining my CSS drop-down menus

[cbostondesign]

I've been working on this for a couple of days now. I am trying to get my drop-down menus to work in IE and not having much luck. They work just fine in Firefox but get hidden behind a banner image in IE.

Here are a couple of images so you know what I'm talking about: <>

Here is the code for the header and the banner where the issue is:

<!--- Header Start --->

<div id="hdr">

<span id="toplink">
<ul class="menu">
<li><a href="#" title="About Us">About Us</a>
<div>
<ul>
<li><a href="#">At A Glance</a></li>
<li><a href="#">Management Team</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Candid Smiles</a></li>
</ul>
</div>
</li>

<li>&nbsp;¦&nbsp;</li>

<li><a href="#" title="Contact Us">Contact Us</a>&nbsp;&nbsp;
<div>
<ul>
<li><a href="#">General Contact Information</a></li>
<li><a href="#">Sales Services Team</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Directions</a></li>
</ul>
</div>
</li>
</ul>
</span>

<!--- Navigation --->
<!--- <div id="nav" class="navlist"><cfoutput query="seclist"><a href="#" target="_self">#seclist.sectiondesc#</a></cfoutput></div> --->
<div id="nav">
<ul class="menu">
<li><a href="#" title="Client Login">Client Login</a></li>
<li><a href="#" title="News">News</a>
<div>
<ul>
<li><a href="#">USPS Updates</a></li>
<li><a href="#">Related Sites</a></li>
</ul>
</div>
</li>

<li><a href="#" title="Clients">Clients</a>
<div>
<ul>
<li><a href="#">Clients</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</div>
</li>

<li><a href="#" title="Services">Services</a>
<div>
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#">Direct Mail</a></li>
<li><a href="#">Air Gram</a></li>
<li><a href="#">Email Blasts</a></li>
<li><a href="#">Inte-Fax</a></li>
<li><a href="#">EZGram</a></li>
<li><a href="#">Same Day Service</a></li>
</ul>
</div>
</li>
</ul>
</div>
<a
href="#"><img src="ourlogo.gif" alt="##" border="0" height="75" /></a>

</div>

<!--- Header End --->

<div id="bar" align="right">
Welcome to example.com&nbsp;&nbsp;&nbsp;&nbsp;
</div>

<!--- The Banner Div --->
<div id="bannerblock" align="right">
<img src="banner.jpg" width="800" height="233" border="0" usemap="#Map" align="bottom" />
<map name="Map" id="Map"><area shape="rect" coords="98,7,246,67" href="#" alt="example.com" /><area shape="rect" coords="217,182,538,203" href="#" alt="example.com" />
<area shape="rect" coords="323,6,432,26" href="#" alt="#" />
<area shape="rect" coords="364,34,453,52" href="#" alt="#" />
<area shape="rect" coords="391,61,516,81" href="#" alt="#" />
<area shape="rect" coords="414,87,497,105" href="#" alt="#" />
<area shape="rect" coords="443,114,527,132" href="#" alt="#" />
</map></div>

And the CSS:

#hdr {
height:75px;
background:#ffffff;
color: #333333;
}

#nav {
background-color:#ffffff;
background-image:url(NavBar.jpg);
background-repeat:no-repeat;
float:right;
position:relative;
top:46px;
left:130px;
width:275px;
height:29px;
border-width:0 0 0 0;
padding:0px;
}

#nav ul {
margin:0;
padding:0 0px;
list-style:none;
}
#nav li {
float:right;
height:30px;
margin:0;
padding:0;
background-image:none;
line-height:normal;
text-indent:0;
font-weight:bold;
font-size:14px;
}
#nav a, #nav strong {
display:block;
padding:8px 8px 5px;
border:solid #62aada;
border-width:0 2px 0 0;
color:#3f4b7f;
text-decoration:none;
white-space:nowrap;
}

* html #nav a {
width:1%;
}
#nav #current strong, #nav #current a {
background-repeat:no-repeat;
}
#nav a:hover, #nav #current a:hover strong, #nav #current strong {
color:#ffffff;
}
#nav a:hover {
background-repeat:no-repeat;
}
#nav a strong, #nav #current a strong {
background:none;
padding:0;
border:none;
}

.menu, .menu ul {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
z-index:2;
}

.menu li {
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
z-index:2;
}

.menu li:hover {
position: relative;
z-index:2;
}

.menu li li {
width: 100%;
background-color:#b4d8ee;
z-index:2;
}

.menu li li div {
top: 0;
left: 0;
z-index:2;
}

.menu li li:hover div {
left: 100%;
z-index:2;
}

.menu div {
visibility: hidden;
position: absolute;
z-index: 2;
}

.menu li:hover>div {
visibility: visible;
z-index:2;
}

.menu:after, .menu ul:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
z-index:2;
}

.menu, .menu ul {
min-height: 0;

.menu div {
background-image:url(empty.gif);
padding: 10px 30px 30px 30px;
margin: -9px 0 0 -30px;
}


#bar {
height:25px;
width:100%;
background-color: #3f7ea9;
color: #ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border:solid #000000;
border-width:0 0 0 0;
line-height:24px;
}

#bar a {
color: #ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size:80%;
}

#bannerblock {
position:relative;
color: #333333;
width:800px;
height:230px;
padding:0;
z-index:1;
}

If anyone could tell me what I'm doing wrong, I would really appreciate it... :(

[edited by: SuzyUK at 3:20 pm (utc) on July 11, 2008]
[edit reason] examplified code a removed URI's per TOS [/edit]

[cbostondesign]

Nevermind. I figured it out. Turns out IE has child divs inherit the parent div's z-indexs. So you have the set the z-indexs for every div. starting with the main div at zero and working you way up.

[eelixduppy]

Glad you figured it out!

oh, and welcome to WebmasterWorld! :)

[SuzyUK]

yes Welome. and I'm glad you figured it out too

my stab at a solution would've been to tell you.. you have too much positioning going on and to remove the positioning from either the bannerblock div or from the nav div itself.

I'm not sure that both (or either) needs it, removing it from either fixes it and saves you the bother of "working your way up", which should not be necessary in the first palce../ why all the relative positioning and z-indexes?

thanks for your follow up and Welcome to WebmasterWorld!

[edited by: SuzyUK at 8:40 pm (utc) on July 11, 2008]

[cbostondesign]

I am actually fairly new to designing layout strictly with Divs. I had always designed using tables and only using Divs to float content. I had to modify my designing techniques to accommodate the requirements of my current job. Which worked out because I needed to did it anyways.

So like I said, I'm kinda new at this Div structure thing and any recommendations are appreciated.