Javascript timeout mouseover help

JavaScript
1

I am a Javascript novice so please bear with me here. I made a multi level menu at http://x7.ro/proiect/produse.html -first left menu item:Raticide- by using Javascript and css. What this should do is show the sub-menu on mouseover and hide it on mouseout WITH a custom delay so people have a chance to click menu items. This seems to work except for the all needed delay. I was trying to use javascript setTimeout function but I cannot seem to make it work. Think this should be easy for a pro and Id remain indebted if any of you could help. Thanks a lot.

Below is the working code:JS and Html.


<SCRIPT type=text/javascript>
function showElement(layer){
	var myLayer = document.getElementById(layer);
	if(myLayer.style.display=="none"){
		myLayer.style.display="block";
		myLayer.backgroundPosition="top";
	} else { 
		myLayer.style.display="none";
	}
}
function hideElement(layer){
	var myLayer = document.getElementById(layer);
	if(myLayer.style.display=="block"){
		myLayer.style.display="none";
		myLayer.backgroundPosition="top";
	} else { 
		myLayer.style.display="block";
	}
}
</SCRIPT>



 <A class=button onMouseOver="javascript:showElement('v-menu');return false;" onMouseOut="javascript:hideElement('v-menu');return false;"  href="#"><SPAN>Raticide</SPAN></A> 
      <UL style="DISPLAY: none" id=v-menu class=v-menu>
        <LI><A href="aaa.html">PRODIORAT</A></LI>
        <LI><A href="aaa.html">	PROBRODIRAT</A></LI></UL>