"Einschieben" von Unterpunkten in ein Menü

[Rachus]

Hallo!

Wahrscheinlich ist mein Problem banal, aber trotz stundenlangem Suchen, habe ich nur unbefriedigende Lösungsmöglichkeiten gefunden:
Ich möchte gerne eine vertikal angeordnetes Menü machen, bei dem beim Überfahren eines Menüpunktes mit der Maus weitere Unterpunkte eingeblendet werden. Das funktioniert auch ganz gut, nur sieht es nicht schön aus, wenn es nicht animiert ist.

Daher habe ich einfach mal ein bisschen herumprobiert und bin zu folgendem Problem gelangt.

function slide(pix) // Ausgangslage: Ein Element mit 0px Höhe  
{  
	var sub=document.getElementById("submenu");  
	sub.style.height=pix+"px";  
	if (pix<100) window.setTimeout(function(){slide(++pix);}, 30);  
}  
slide(0)

Damit schiebe ich zwar Untermenü ein, allerdings hat es danach die (in der if-Bedingung festgelegte) Größe von 100px. Das Ganze habe ich auch schon mit %-Angaben versucht, allerdings ohne Erfolg. Daher meine Frage: Wie schaffe ich es, dass das Submenü solange größer wird, bis es die Größe erreicht hat, die es hätte, wenn es einfach nur ohne Beeinflussung dargestellt wird?

Hoffentlich konnte ich mich verständlich machen, sodass ihr mir helfen könnt.

Schönen Abend!

Rachus