Meny design

<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?