Array meny?

Kollade in föreningssparbankens hemsida och fick syn på deras drop-down meny... som jag tycker ser bra ut faktist... kollade deras källkod och hittade lite javascript där... men som vanligt är det inte så lätt att försöka fixa något sådant själv... undra bara om någon kan hjälpa mig att få igång det/visa något liknande...

Dom kör någon slags array meny som jag gillar extremt mycket... och även drop-down och... ja vad man kan kalla det under-under rubriker... finns det någon som har en tutorial eller något liknande som slår ihop allt-i-ett?

Nåt sånt här kanske ?
Har labbat lite med detta, fick det inte att funka helt 100 på Linux med Mozilla, varför det kanske är lite konstiga grejor i tabellerna. Det klarar du säkert att ändra så Du får det som Du vill ha det.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">

// Några variabler
var xPos = 80;		// Var menyn ska börja i x-led
var yPos = 60;		// Var menyn ska börja i y-led
var tdWidthHead = 100;	// Bredden på rubrikcellerna
var tdHeightHead = 25;	// Höjden på rubrikcellerna
bgColorHead = "blue";	// Rubrikernas bakgrundsfärg
bgColorSub = "#FFFFCC";	// Underrubrikernas bakgrundsfärg

// Definiera rubriker och underrubriker
var rubrik=new Array(
	new Array("Rubrik 1", "",
		"Underrubrikerna 1", "sida1.htm",
		"Underrubrikerna 2", "sida2.htm",
		"Underrubrikerna 3", "sida3.htm",
		"Underrubrikerna 4", "sida4.htm" 
	),
	new Array("Rubrik 2", "",
		"Underrubrikerna 1", "sida5.htm",
		"Underrubrikerna 2", "sida6.htm",
		"Underrubrikerna 3", "sida7.htm"
	),
	new Array("Rubrik 3", "sida8.htm"
	)
);

// Ta reda på vilken webbläsare besökaren använder
var ns4 = (document.layers)?true:false;
var ie4 = (document.all &&(!document.getElementById))?true:false;
var dom = (document.getElementById)?true:false;

// Funktion för att visa objekt
function showMenu(id)
{
	if(ns4) document.layers[id].visibility = 'Visible';
	if(ie4) document.all[id].style.visibility = 'Visible';
	if(dom) document.getElementById(id).style.visibility = 'Visible';
}

// Funktion för att dölja objekt
function hideMenu(id)
{
	if(ns4) document.layers[id].visibility = 'Hidden';
	if(ie4) document.all[id].style.visibility = 'Hidden';
	if(dom) document.getElementById(id).style.visibility = 'Hidden';
}

// Skriv ut tabell med alla rubriker
document.write('<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" BGCOLOR="' + bgColorHead + '"');
document.write(' STYLE="position: absolute; top: ' + yPos + 'px; left: ' + xPos + 'px">');
document.write("<TR>");

for (i=0; i<rubrik.length; i++)
{
	document.write('<TD STYLE="width: ' + tdWidthHead + 'px; height: ' + tdHeightHead + 'px; cursor: pointer"');
	document.write(' onMouseOver="showMenu(\'a' + i + '\')" onMouseOut="hideMenu(\'a' + i + '\')">');

	if (rubrik[i][1] == "") {
		document.write(rubrik[i][0]);
	}
	else {
		document.write('<A HREF="' + rubrik[i][1] + '">' + rubrik[i][0] + '</A>');
	}
	document.write("</TD>");
}

document.write("</TR>");
document.write("</TABLE>");

// Skriv ut tabeller med alla underrubriker
sPos = yPos+tdHeightHead;
for (i=0; i<rubrik.length; i++)
{
	document.write('<TABLE BORDER="0" ID="a' + i + '" onMouseOver="showMenu(\'a' + i + '\')" CELLPADDING="2" CELLSPACING="0"');
	document.write(' STYLE="visibility: hidden; position: absolute; top:' + sPos + 'px; left:' + xPos + 'px; background: ' + bgColorSub + '">');

	for (j=2; j<rubrik[i].length; j++)
	{
		document.write('<TR>');
		document.write('<TD STYLE="width: 2px" onMouseOut="hideMenu(\'a' + i + '\')"></TD>');
		if (rubrik[i][j+1] == "") {
			document.write('<TD>' + rubrik[i][j] + '</TD>');
		}
		else {
			document.write('<TD><A HREF="' + rubrik[i][j+1] + '">' + rubrik[i][j] + '</A></TD>');
		}
		document.write('<TD STYLE="width: 2px" onMouseOut="hideMenu(\'a' + i + '\')"></TD>');
		j++;
	}
	document.write('</TR><TR>');
	document.write('<TD COLSPAN="3" STYLE="height: 5px" onMouseOut="hideMenu(\'a' + i + '\')"></TD>');
	document.write('</TR>');
	document.write('</TABLE>');
	xPos+=100;
}

</SCRIPT>