Dropdown menu

Jeg har en dropdown menu på denne side: http://www.beis.dk/footstar
Hvis man køre musen over "The Club" kommer den ned, men den virker ikke ordenligt, nogle gange forsvinder den, og hvis man trækker musen langsomt ned over hopper den også væk.. Ved ikke helt hvad det kan skyldes, men håber at nogle lige vil tjekke min kode og se hvad jeg kan gøre anderledes?!:

java script:
<script type="text/javascript">
<!-- hide javascript
function startList(){
if(document.all&&document.getElementById){
  navRoot=document.getElementById("nav").getElementsByTagName("LI");
  for(i=0;i<navRoot.length;i++){
  navRoot[i].onmouseover=function(){this.className+=" over";}
  navRoot[i].onmouseout=function(){this.className=this.className.replace(" over", "");}
  }
}
}
window.onload=startList;
//-->
</script>

Stylesheet:
ul {
  padding: 0;
  margin: 0;
  list-style: none;
  cursor:pointer;
  }
 
li {
  float: left;
  position: relative;
  width: 100px;
  }

li ul {
  display: none;
  position: absolute;
  top: 22px;
  left: -6;
  background-color:#000000;
  }
 
li > ul {
  top: auto;
  left: auto;
  }

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

ul ul li li {
  border-left: 1px solid #01265d;
  border-right: 1px solid #01265d;
  }

Menu:
<ul id="nav">

<ul>
<li><a href='index.asp?page=main'>Home</a></li>
</ul>

<ul>
<li><a>The Club</a>
<ul>
<li><a href='index.asp?page=players'>Squard</a></li>
<li><a href='index.asp?page=youth'>Youth Squard</a></li>
<li><a href='index.asp?page=staff'>Staff</a></li>
<li><a href='index.asp?page=fixtures'>Fixtures</a></li>
<li><a href='index.asp?page=tranfers'>Tranfers</a></li>
</ul>
</li>
</ul>
__________________________________
Håber nogen kan hjælpe mig!