CSS - Javascript - Meny

Har nyligen börjat med css och läste en meny-tutorial som ska se ut så här:
http://www.alistapart.com/d/horizdropdowns/horizontal2.htm

Det som skiljer min från den är att för det första så hamnar vissa av mina undermenyer bakom huvudmenyn.
http://www.moggen.com/domarklubben

Problem två är att då muspekaren rör sig över huvudmenyn skall undermenyn komma fram. När jag tar bort muspekaren så skall undermenyn försvinna. I min meny så försvinner inte undermenyn.

css-koden
ul {
margin : 0;
padding : 0;
list-style : none;
width : 100%;
border-bottom : 1px solid #bbb;
}
ul li {
position : relative;
}
li ul {
position : absolute;
left : 149px;
top : 0;
display : none;
}
ul li a {
display : block;
text-decoration : none;
color : #777;
background : #fff;
padding : 5px;
border : 1px solid #ccc;
border-bottom : 0 none inherit;
}
* html ul li {
float : left;
height : 1%;
}
* html ul li a {
height : 1%;
}
ul li a:hover {
color : #e2144a;
background : #f9f9f9;
}
li ul li a {
padding : 2px 5px;
}

li:hover ul, li.over ul {
display : block;
}

javascriptet
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace»
(" over", "");
}
}
}
}
}
window.onload=startList;
</script>

Sen får ni görna posta kommandona för att få tjusig text-formatering beroende på vilken kod man använder för att koden skall bli mer lättläst i forumet. Testade [css][/css], <css></css> men det funkade inte