[css-d] Drop Down Menu Bug in IE, not Firefox

[Michael Halvorsen]

I am having trouble getting a drop down menu to display over the top of
another menu. In Firefox, the drop down menu is displayed above the other
menu below it on rollover, but not in IE. In IE, the drop down menu is
displayed under the other menu.

This is the css for the first drop down menu:
ul.nav {
  background:#666;
}
ul.main li {
  position:relative;
  top:0;
  left:0;
}
ul.main li ul {
  border-top:0;
}
ul.main li ul li {
  float:left;
}
ul.main li a {
    height:2.5em;
    line-height:2.5em;
    border:0;
    color:#fff;
    background:#666;
}
ul.main li ul li a {
  width:12em;
  line-height:2em;
  height:2em;
  text-align:left;
  color:#fff;
  border-top:1px solid #444;
  background:#444;
}
ul.main li a:focus {color:#fff; background:#666;}
ul.main li ul li a:hover {
  color:#fff;
  background:#555;
}
ul.main li:hover a {
  color:#fff;
  background:#555;
}
ul.main li:hover ul li a {color:#fff;}
ul.main li:hover ul li a:hover {color:#fff; background:#444;}
ul.main li:hover a:active {background:#444;}
ul.main li:hover ul li a:active {color:#fff; background:#222;}



This is the css for the second menu:

#imageMenu a, li{
    margin: 0;
    padding: 0;
}

#container {
    width: 500px;
    margin: auto;
    padding-top: 50px;
    padding-bottom: 50px;
}


#imageMenu {
    margin: 0;
    padding: 0;
    position: relative;
    width: 620px;
    height: 200px;
    overflow: hidden;
}



#imageMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    height: 200px;
    width: 1000px;
    }

#imageMenu ul li {
    float: left;
}

#imageMenu ul li a {
    text-indent: -1000px;
    background:#FFFFFF none repeat scroll 0%;
    border-right: 2px solid #eee;
    cursor:pointer;
    display:block;
    width:122px;
    height: 200px;
    margin: 0;
    padding: 0;
}

#imageMenu ul li.heat a {
    background: url(../images/industrialheat.gif) repeat scroll 0%;
    margin: 0;
    padding: 0;
}

#imageMenu ul li.flooring a {
    background: url(../images/flooring.gif) repeat scroll 0%;
    margin: 0;
    padding: 0;
}

#imageMenu ul li.fab a {
    background: url(../images/industrialfab.gif) repeat scroll 0%;
    margin: 0;
    padding: 0;
}

#imageMenu ul li.roofing a {
    background: url(../images/roofing.gif) repeat scroll 0%;
    margin: 0;
    padding: 0;
}

#imageMenu ul li.plastic a {
    background: url(../images/plasticfab.gif) repeat scroll 0%;
    width: 310px;
    margin: 0;
    padding: 0;
}

What do I need to do to make the drop down menu, the first one, overlay onto
the second menu? It only has this problem in IE. In Firefox, it displays how
I want it to.

Thanks for your help in advance.

Best,
Michael
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/