CF loop drop down menu

I have a loop that displays products from a database. It works fine but I have a pop-up box that is displayed when rollover. This pop-up box works great except for the fact, in IE it is displayed behind everything. I tried messing with z-index and just lost myself.

goto http://karavelshoes.com/karavelNew


CFM code:

<div class="menu">
<ul>
<cfset layerDrop = 0>
<cfloop query="getproducts" StartRow="#URL.StartRow#" EndRow="#EndRow#">
<cfoutput>

<cfif counter IS 4 OR counter IS 5 OR counter IS 10 OR counter IS 11 OR counter IS 16 OR counter IS 17>
<cfset style="drop2">
<cfelse>
<cfset style="drop">
</cfif>

<li><a href="interiorW.cfm?category_id=#URL.category_id#&subcat_id=#URL.subcat_id#&sk u=#sku#" style="background: url(#thumbsfolder##sku#.jpg) center no-repeat;"><!--[if IE 7]><!--></a><!--<![endif]-->


<ul class="#style#">
<li>
<p>
<b>Product/b> #product_name#<br />
<b>Price/b> #LSCurrencyFormat(price)#<br />
<b>Item Number/b> #sku#
</p>
<cfif counter IS 4 OR counter IS 5 OR counter IS 10 OR counter IS 11 OR counter IS 16 OR counter IS 17>

<img src="#prodpicsfolder##sku#.jpg" width="220px" style=" position:relative; left:25px; top:30px;">
<cfelse>
<img src="#prodpicsfolder##sku#.jpg" width="220px" style="position:relative; left:23px; top:30px;" />
</cfif>

</li>


</ul>

</li>


<cfset counter = counter + 1>

</cfoutput>
</cfloop>
</ul>
</div>




as you can see, I tried to mess with z-index, but had no luck!
Here is my css:


.menu {margin:45px 0px 0px 0px;}


/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
position:relative;
display:inline;

}

/* style the links for the top level */
.menu a, .menu a:visited
{
text-decoration:none;
display:block;
border-width:1px;
border-color:#CCCCCC;
border-style:solid;
width:100px; height:100px;
padding:0px 5px 0px 5px;
margin:0px 3px 15px 0px;

}
.menu a:hover
{
text-decoration:none;
border-width:1px;
border-color:#666666;
border-style:solid;

}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}


.menu li li {
position:relative;
background:#FFFFFF;
border:1px #666666 solid;
width:269px;
padding:0px 0px 45px 0px;
}
.menu p {
position:relative; left:20px; top:10px;
display:inline;

}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul.drop {
visibility:hidden;
position:absolute;
width:277px;
top:40px;left:70px;
padding:0px 0px 0px 23px;

}
.menu ul ul.drop2 {
visibility:hidden;
position:absolute;
width:300px;
top:40px;left:-240px;

}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }