JS Menü

[slosd]

Ich hab mir jetzt ein dynamisches Menü mit JS gebastelt und das Menü selber funzt auch gut. Mein Problem ist jetzt aber, dass der Layer unter dem Menü nach unten verschoben wird.
zum Anschauen auf dieser Seite: http://leber.le.funpic.de/scriptsourc/
die Codes:

Das Menü selber:

   <ul id="menu">
<li><a href="?loc=1"><img src="images/house.png" width="16" height="16" alt="">&nbsp;Home</a></li>
<li><a href="?loc=2"><img src="images/magnifier.png" width="16" height="16" alt="">&nbsp;Script Suche</a></li>
<li onmouseover="sw_ul(this.childNodes[2].getAttribute('id'))" onmouseout="hd_ul(this.childNodes[2].getAttribute('id'))"><a href="?loc=3"><img src="images/script.png" width="16" height="16" alt="">&nbsp;Script &Uuml;bersicht</a>
<ul id="sub_1" onmouseover="sw_ul(this.getAttribute('id',1))">
<li class="sub"  onClick="hide(this.parentNode.getAttribute('id'))"><a href="?loc=3&tos=1">PHP Scripts</a></li>
<li class="sub"  onClick="hide(this.parentNode.getAttribute('id'))"><a href="?loc=3&tos=2">Java Scripts</a></li>
</li>
</ul>
<li><a href="?loc=4"><img src="images/user_edit.png" width="16" height="16" alt="">&nbsp;Scripts von Usern</a></li>
<li><a href="?loc=6"><img src="images/user_add.png" width="16" height="16" alt="">&nbsp;Forum</a></li>
<div></div>
</ul>

CSS:

#menu {
width:76.8%;
height:4%;
margin-top:-1%;
padding-top:3px;
background-color:#0F3662;
text-align:center;
}
      ul#menu li {
    margin-left:5px;
    margin-right:5px;
    float:left;
    width:12em;
    text-align:center;
    list-style:none;
    position:relative;
    background-color:#0F3662;

  }

      ul#menu ul li.sub {
    width:12em;
    background-color:#0F3662;
    padding:3px;
    padding-left:0px;
    border:1px solid #ffffff;
    border-top-width:0px;
  }
      ul#menu ul {
    margin-left:-3em;
    margin-top:2px;
    display:none;

    }
      ul#menu div{
    clear:left;
  }
#menu a {
text-decoration:none;
margin-left:2%;
margin-right:2%;
display:block;
}

Und Javascript:

function sw_ul(id1,ida)
      {
        for(i=0;document.getElementsByTagName("ul")[i];i++)
        {
        document.getElementsByTagName("ul")[i].getAttribute('id')!="menu" && i!=ida?document.getElementsByTagName("ul")[i].style.display = "none":false;
      }
        document.getElementById("outcontent").style.marginTop = "-3.5%";
        document.getElementById(id1).style.display = "block";
        clearTimeout(hide_menu);       
      }
      function hide(id2)
      {
        document.getElementById("outcontent").style.marginTop = "-1.2%";
        document.getElementById(id2).style.display = "none";
    }
      function hd_ul(id3)
      {
    hide_menu = setTimeout('hide("' +id3+ '")','500');
  } 

Ich hab zwar im JS versucht den Fehler auszubessern aber das ist auch nicht optimal.

[slosd]

*Thema nach oben schieb*

Weiß keiner wie man den Fehler beheben kann ??
oder will sich niemand die Codes durchlesen

übrigens:
Ja nicht im IE anschaun. CSS ist bis jetzt nur auf FF eingestellt.