Javascript-Navi mit Unterleiste

S'gott,

habe hier ein kleines Problem, da ich mit Javascript leider nicht so gut kann. Hab zwar schon gegoogelt, aber ich dachte mir, ich frag euch auch mal:

Ich brauche eine Navigationsleiste, die in etwa so aussieht:


Die rote Leiste beinhaltet Links die, sobald ich mit der Mouse drüberfahre, einen Unterbalken in der grünen Sub-Navogationsleiste anzeigen. Ich habe zwar einige Javascripts, die ganz nette Mouse-Over-Effekte bieten, aber das krieg ich irgendwie nicht hin. Ich nehme mal an, daß da auch ein wenig mit Tabellen und so rumgespielt werden muß. Nur wie geht das in Javascript?

Inspiriert hat mich übrigens die Navigationsleiste von Standard.at

Bin dankbar für jeden Hinweis

Puh, das klingt zwar alles sehr einleuchtend, aber ich weiß nicht so recht, wo ich anfangen soll und wo die info jeweils eingetragen werden soll. soll ich erstmal eine tabelle erstellen und die jeweiligen menüpunkte da reinklatschen? wie soll ich vorgehen?

Zitat von Yeahman

ich würd zuerst die Tabelle ausgeben, dann irgentwas bei onmouseover machen, und am Ende die Untermenüs rein

wers gscheit machen will braucht auch keine tables...
<div>{home}{link1}{link2}{link3}....</div>
<div>
<div id="X1" style="display:none;">{link1sub1}{link1sub2}{link1sub3}...</div>
<div id="X2" style="display:none;">{link2sub1}{link2sub2}{link2sub3}...</div>
<div id="X3" style="display:none;">{link3sub1}{link3sub2}{link3sub3}...</div>
</div>

function hideall()
{
for(i;1;3;i++)
{
document.getElementByID('X'+i).style.display='none'
}
}

function show(elementID)
{
hideall()
document.getElementByID(elementID).style.display='none'
}

und ein link sollte dann halt sowas in der art drinn stehen haben:
onMouseover="show('X1')"

so, vor allem die "hideall" function kann noch bissal verbesserung vertragen, aber für 3 minuten nicht schlecht eh?