Trouble with my CSS dropdown menu

I recently implemented a CSS dropdown menu. I want the menu to pop up whenever you mouseover a certain link or click the link, and to have the menu disappear when you mouseout from the menu. I got that to work, but I noticed an issue that I believe has to do with the z-index. Below a portion of the menu is an image (the menu covers the image because it has a higher z-index). When the user moves his mouse to an area of the menu that has the image below it, the menu disappears. Let me demonstrate...
-----------------
|___________|
|xx_________|
|___________|

The "xx" is an image that is blocked by the menu, but if I mouseover that portion of the menu, the menu disappears. For reference, the "xx" has a z-index of 2, and the menu has a z-index of 4.


<script type="text/javascript">
function showlayer(layer,e)
{
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none" || myLayer.style.display=="" || e=="mouse")
{
myLayer.style.display="block";
}
else
{
myLayer.style.display="none";
}
}

</script>
<div id="foodMenu" align="center">
<ul class="dropDownMenu">
<li><a href="#" onclick="showlayer('subLayer')" title="Sort by food" onmouseover="showlayer('subLayer','mouse')">Food*</a></li>
<ul class="subDropDownMenu" id="subLayer" onmouseout="showlayer('subLayer')">
<li><a href="<?php echo $food_name_link;?>" title="Sort by food name">Sort by food name</a></li>
<li><a href="<?php echo $food_rating_link;?>" title="Sort by food rating">Sort by food rating</a></li>
</ul>
</ul>
</div>


And here's the CSS...

ul, li{list-style:none;}
#foodMenu{
height:0px;
padding:0px 78px 36px 0px;
width:150px;
}
#foodMenu .dropDownMenu li {
float:none;
width:150px;
}
#foodMenu .dropDownMenu li a{
display:block;
}

#foodMenu ul .subDropDownMenu {
border:solid 1px #004A66;
background:#FFFFFF;
position:relative;
width:150px;
padding:0px 0px;
clear:both;
z-index:4;
display:none;
}
#foodMenu ul .subDropDownMenu li{
background:none;
display:block;
float:none;
border:0;
height:auto;
line-height:normal;
border-bottom:solid 1px #004A66;
}
#foodMenu .subDropDownMenu li a{
background:none;
display:block;
float:none;
padding:6px 6px;
margin:0;
border:0;
height:auto;
line-height:normal;
}
#foodMenu .subDropDownMenu li a:hover{
background:#5195CE;
color:#FFF;
}

Could you please post a link to your page?
btw, relying completely on javascript to make the drop down effect may cause some accessibility issues for those who have no javascript support in their browser. I'd recommend to use a CSS based one instead, see http://htmldog.com/articles/suckerfish/dropdowns/