IE Z-Index Dropdown

HTML & CSS
1

I’m having trouble getting my dropdown to appear above the parent LI’s.

Any Solutions? The parent LI is set to relative and the dropdown is set to position with a positive z-index.

<style type="text/css">
#menu {
margin:0;
padding:0;
list-style:none;
}

#menu li {
float:left;
position:relative;
}

#menu a {
padding:15px 50px 15px 6px;
display:block;
font-family:Tahoma;
font-size:14px;
text-decoration:none;
font-weight:bold;
letter-spacing:-.1px;
background:#FFF url('menu-dashed-bg.gif') 0 0 repeat-y;
}

#menu a.home { color:#1b3c5d; }
#menu a.debt-relief-options { color:#f74b00; }
#menu a.debt-settlement-services { color:#4c8221; }
#menu a.financial-help-center { color:#4ab6de; }
#menu a.about-us { color:#4f4f50; }
#menu a.blog { color:#ec018c; }

#menu ul {
margin:0;
padding:0;
list-style:none;
position:absolute;
left:-999em;
top:40px;
background:#000;
display:block;
}

#menu li:hover ul, #menu li.sfhover ul {
left:0px;
}

#menu ul li {
border-left:none;
background:#FFF;
position:static !important;
}

#menu ul a {
padding:4px 15px;
font-size:12px;
color:#666666;
font-family:Arial,Verdana,sans-serif;
display:block;
background:#FFF url('menu-arrow.gif') 8px 50% no-repeat;
border-bottom:1px #e0e0e0 solid;
border-right:1px #e0e0e0 solid;
letter-spacing:normal;
font-weight:normal;
display:block;
}

#menu ul a:hover {
background:#d7f4fc url('menu-arrow.gif') 8px 50% no-repeat; 
border-bottom:1px #bdd6dd solid;
border-right:1px #bdd6dd solid;
}

#dro, #dro li { width:231px; }
#dro a { width:201px; }
* html #dro a { width:231px; }
#drs, #drs li { width:271px; }
#drs a { width:241px; }
* html #drs a { width:271px; }
#fhc, #fhc li { width:181px; }
#fhc a { width:151px; }
* html #fhc a { width:181px; }
#con, #con li { width:181px; }
#con a { width:151px; }
* html #con a { width:181px; }
</style>
<script type="text/javascript">
sfHover = function() {
	var sfEls = document.getElementById("menu").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


</script>
<body>
<ul id="menu">
  <li><a href="#" title="" class="home">Home</a></li>
  <li><a href="#" title="" class="debt-relief-options">Debt Relief Options</a>
    <ul id="dro">
      <li><a href="#" title="">Do Nothing</a></li>
      <li><a href="#" title="">Accelerated Debt Payoff</a></li>
      <li><a href="#" title="">Debt Consolidation</a></li>
      <li><a href="#" title="">Consumer Credit Counseling</a></li>
      <li><a href="#" title="">Debt Settlement</a></li>
      <li><a href="#" title="">Bankruptcy</a></li>
      <li><a href="#" title="">Comparison of Debt Relief Options</a></li>
    </ul>
  </li>
  <li><a href="#" title="" class="debt-settlement-services">Debt Settlement Services</a>
    <ul id="drs">
      <li><a href="#" title="">Free Do-It-Yourself Debt Settlement</a></li>
      <li><a href="#" title="">Do-It-Yourself Debt Settlement with Support</a></li>
      <li><a href="#" title="">Full Service Debt Settlement</a></li>
      <li><a href="#" title="">Debt Settlement Services Comparison</a></li>
    </ul>
  </li>
  <li><a href="#" title="" class="financial-help-center">Financial Help Center</a>
    <ul id="fhc">
      <li><a href="#" title="">Debt Calculators</a></li>
      <li><a href="#" title="">Glossary</a></li>
      <li><a href="#" title="">Debt Relief Articles</a></li>
    </ul>
  </li>
  <li><a href="#" title="" class="about-us">About Us</a>
    <ul id="con">
      <li><a href="#" title="">Contact Us</a></li>
      <li><a href="#" title="">Press Room</a></li>
    </ul>
  </li>
  <li><a href="#" title="" class="blog">Blog</a></li>
</ul>
</body>
2

This is exactly what i was looking for. Thank you Paul.

3

Hi,

Not sure if this is the problem you are talking about but this allows the submenu to overlap the next item on the list.


#menu li:hover , #menu li.sfhover {z-index:99}