Z-index not working in IE6 – please help!

[url]http://www.concrete-creative.com/test/recipe.html[/url]

When you hover over PRINT RECIPE, the text of the link below shows through the popup menu… I have tried everything I can think of in terms of adding z-index to different elements and I just can’t get it working on IE6 (works fine elsewhere) What am I missing?

The HTML is here:

[CODE]
<div id=”navig2″><table width=”150″ border=”0″ cellspacing=”0″>
<tr>
<td>
<ul id=”pop-out-nav2″>
<li><a href=”#”>PRINT RECIPE</a>
<ul>
<li><a href=”javascript:openAWindowRecipe3x5(‘print_recipe3x5.html’,’newWin1′,420,700,1)”><img src=”images/spacer.gif” alt=”” width=”40″ height=”1″ border=”0″>print 3×5</a></li>
<li><a href=”javascript:openAWindowRecipe4x6(‘print_recipe4x6.html’,’newWin1′,493,700,1)”><img src=”images/spacer.gif” alt=”” width=”40″ height=”1″ border=”0″>print 4×6</a></li>
<li class=”last”><a href=”javascript:openAWindowRecipeFull(‘print_recipefull.html’,’newWin1′,650,700,1)”><img src=”images/spacer.gif” alt=”” width=”30″ height=”1″ border=”0″>print full page</a></li>

</ul>
</li>
<li><a href=”recipecomments.html”>VIEW COMMENTS (0)</a></li>
<li><a href=”javascript:openAWindowEmails(‘add_comment.html’,’newWin1′,420,220,1)”>ADD A COMMENT</a></li>
<li><a href=”javascript:openAWindowEmails(‘add_personalnote.html’,’newWin1′,420,220,1)”>ADD A PERSONAL NOTE</a></li><!– would say EDIT PERSONAL NOTE if you already have one there –>
<li><a href=”#”>FLAG RECIPE</a>
<ul>

<li><a href=”#” class=”radio”><input type=”radio” name=”flag” value=”red” selected><img src=”images/icon_flag-red_sm.jpg” alt=”” width=”13″ height=”13″ border=”0″><input type=”radio” name=”flag” value=”green”><img src=”images/icon_flag-green_sm.jpg” alt=”” width=”13″ height=”13″ border=”0″><input type=”radio” name=”flag” value=”yellow”><img src=”images/icon_flag-yellow_sm.jpg” alt=”” width=”13″ height=”13″ border=”0″><br><input type=”radio” name=”flag” value=”none”><img src=”images/no-flag.gif” alt=”” width=”30″ height=”13″ border=”0″></a></li>
<li class=”last”><a href=”javascript:openAWindowHelp(‘help_flag.html’,’newWin1′,430,380,1)”><img src=”images/spacer.gif” alt=”” width=”45″ height=”1″ border=”0″>help?</a></li>
</ul>
</li>
</li>
</ul>
</td>
</tr>
</table>
</div>
[/CODE]

And the CSS code:

[CODE]
/* RIGHT HAND NAV BOX */
#navig2 {
float: right;
display: block;
width: 150px;
/* height: 32px; */
border : 2px dashed #b0b080;
background-color : #d1d9d1;
z-index : 0;
}
#pop-out-nav2 {
z-index : 3;
}

#navig2 ul {
float: left;
margin: 0 0 0 0;
padding: 0;
list-style: none;
font: 9px verdana, arial, sans-serif;
font-weight: bold;
}

#navig2 ul li {
float: left;
position: relative;
text-decoration: none;
margin: 0;
padding: 0;
border-bottom: 0;
}

#navig2 ul li a {
display: block;
text-decoration: none;
font-weight: bold;
padding: 8px;
color: #666633;
}

#navig2 ul li a:hover {
text-decoration: underline;
font-weight: bold;
padding: 8px;
color: #666633;
}

#navig2 ul li.active {
padding: 8px;
background-color : #d1d9d1;
font-weight: bold;
color: #666633;
}

#navig2 li ul {
position: absolute;
float: right;
left: 0;
display: none;
width: 110px;
z-index:100;

}

/* subnav padding & size */
#navig2 li ul li a {
position: relative;
width: 120px;
padding: 3px;
}

#navig2 li:hover ul, #navig2 li.over ul {
display: block;
left: 50;
top : 20;
}

/* topnav color when dropdown is showing */
#navig2 li:hover a, #navig2 li.over a, #navig2 li ul li:hover a, #navig2 li ul li.over a {
background-color : #d1d9d1;
color: #666633;
}

/* subnav default link */
#navig2 li:hover ul a, #navig2 li.over ul a {
font-family: verdana, arial, sans-serif;
font-size: 9px;
padding: 3px;
font-weight: normal;
background-color: #FFFFFF;
color: #666633;
border-top : 1px solid #b0b080;
border-left : 1px solid #b0b080;
border-right : 1px solid #b0b080;
text-align : left;
}

#navig2 ul li ul li.last a {
border-bottom : 1px solid #b0b080;
}

/* subnav default link under active */
#navig2 li.active:hover ul a, #navig2 li.active ul a {
background-color: #FFFFFF;
color: #666633;
padding: 3px;
font-weight: normal;
text-decoration: none;
}

/* subnav hover link */
#navig2 li:hover ul li:hover a, #navig2 li ul li a:hover {
/* background-image: url(images/nav_bg_transp.png); */
padding: 3px;
background-color: #FFFFFF;
color: #666633;
font-weight: normal;
text-decoration: underline;
}
/* subnav hover link under active */
#navig2 li.active:hover ul li:hover a, #navig2 li.active ul li a:hover {
/* background-image: url(images/nav_bg_transp.png); */
padding: 3px;
background-color: #FFFFFF;
color: #666633;
font-weight: normal;
text-decoration: underline;
}
[/CODE]

Also in #CSS _↴