Meny design

Jag behöver hjälp med att skapa en meny.
Menyn inehåller ett antal huvudkategorier. När man klickar på dem skall det på en rad under huvudkategorierna visas underkategorier.

Kat1 Kat2 Kat3
sub1.1 sub1.2 sub1.3

Tacksam för tips och kod.

<style type="text/css">

#menu, #subMenus {
    background-color: #cc7c2d;
    border: 2px solid #802d1c;
    padding: 5px;
}

#menu ul, #subMenus ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu ul {
    font: normal 14px tahoma;
}

#menu ul li, #subMenus ul li {
    display: inline;
    margin-right: 10px;
}

#menu ul li a, #subMenus ul li a {
    color: #333;
    text-decoration: none;
}

#menu ul li a:hover, #subMenus ul li a:hover {
    color: #000;
}

#subMenus {
    border-top: 0;
}

#subMenus ul {
    font: normal 12px tahoma;
}

#subCat1 {
    visibility: hidden;
}

#subCat2, #subCat3 {
    display: none;
}

</style>

<script type="text/javascript">

var pairs = [
    ["cat1", "subCat1"],
    ["cat2", "subCat2"],
    ["cat3", "subCat3"]
];

var Menu = {
    pairs: [],
    dim1 : 0,

    init: function(){
	dim1 = pairs.length;

	for (var i = 0; i < dim1; ++i){

	    this.pairs[i] = [];
	    for (var j = 0; j < 2; ++j)
		this.pairs[i][j] = document.getElementById(pairs[i][j]);
	
	}

	this.initOnclick();
    },

    initOnclick: function(){
	for (var i = 0; i < dim1; ++i)
	    this.pairs[i][0].onclick = function(e){
		for (var j = 0; j < dim1; ++j){

		    Menu.pairs[j][1].style.visibility = "visible";

		    if (this == Menu.pairs[j][0])
			Menu.pairs[j][1].style.display = "block";
		    else
			Menu.pairs[j][1].style.display = "none";

		}

		if (window.event)
		    window.event.returnValue = false;

		else if (e)
		    e.preventDefault();
	    }
    }
};

window.onload = function(){
    Menu.init();
}

</script>

<div id="menu">
    <ul
	><li><a id="cat1" href="cat1.html">Cat1</a></li
	><li><a id="cat2" href="cat2.html">Cat2</a></li
	><li><a id="cat3" href="cat3.html">Cat3</a></li
    ></ul>
</div>
<div id="subMenus">
    <ul id="subCat1"
	><li><a href="subcat11.html">SubCat1.1</a></li
	><li><a href="subcat12.html">SubCat1.2</a></li
    ></ul>
    <ul id="subCat2"
	><li><a href="subcat21.html">SubCat2.1</a></li
	><li><a href="subcat22.html">SubCat2.2</a></li
    ></ul>
    <ul id="subCat3"
	><li><a href="subcat31.html">SubCat3.1</a></li
	><li><a href="subcat32.html">SubCat3.2</a></li
    ></ul>
</div>

:)

Thnx! Fungerar ju exakt som jag ville ha det :bire

Hur får jag en subkat till subkatten?