Uso di setTimeout() in un menu a comparsa

[usecram]

Sto costruendo un semplice menu a tendina.

Codice HTML:

<div id="navigation">
	<div>
		<h3>Voce1</h3>
		<ul>
		[*]Sottovoce1
		[*]Sottovoce2
		[*]Sottovoce3
		[*]Sottovoce4
		[/list]
	</div>
             ...
</div>

Tralasciando la formattazione CSS il codice JS si occupa, prima di nascondere tutti gli ul annidati nei div, dopodiché:

function menuEnable()  {
	var lstItem = document.getElementById("navigation").getElementsByTagName("div");
	for (i = 0; i < lstItem.length; i++)  {
		lstItem[i].onmouseover = function()  {
			lst = (this.lastChild.tagName == "UL")?this.lastChild :this.lastChild.previousSibling;
			lst.className = "show";
		}
		lstItem[i].onmouseout = function()  {
			lst.className = "hide";
		}
	}
}

Funziona bene, ora però vorrei che i sottomenu si aprissero non immediatamente ma dopo mezzo secondo. Ho provato ad utilizzare setTimeout in questo modo:

function menuEnable()  {
	var lstItem = document.getElementById("navigation").getElementsByTagName("div");
	for (i = 0; i < lstItem.length; i++)  {
		lstItem[i].onmouseover = function()  {
			lst = (this.lastChild.tagName == "UL")?this.lastChild :this.lastChild.previousSibling;
			ID= setTimeout("lst.className = 'show'", 500);
		}
		lstItem[i].onmouseout = function()  {
			clearTimeout(ID);
			lst.className = "hide";
		}
	}
}

Non va perché i menu si aprono dopo mezzo secondo però quando tento di accedere alle sottovoci si richiude subito. Mi direste dove sbaglio.