Problem med dropdown menu

JScript kode 

 <script type="text/javascript">
 var timeout    = 0;
 var closetimer    = 0;
 var ddmenuitem    = 0;
 
 // open hidden layer
 function mopen(id)
 {    
     // cancel close timer
     mcancelclosetime();
 
     // close old layer
     if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 
     // get new layer and show it
     ddmenuitem = document.getElementById(id);
     ddmenuitem.style.visibility = 'visible';
 
 }
 // close showed layer
 function mclose()
 {
     if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 }
 
 // go close timer
 function mclosetime()
 {
     closetimer = window.setTimeout(mclose, timeout);
 }
 
 // cancel close timer
 function mcancelclosetime()
 {
     if(closetimer)
     {
         window.clearTimeout(closetimer);
         closetimer = null;
     }
 }
 
 // close layer when click-out
 document.onclick = mclose; 
 
 </script>

HTML kode 

 <ul id="menuTop">
             <li><a href="" onmouseover="mopen('sub1')" onmouseout="mclosetime()"><img border="0" class="menuImg" src="img/menuTop/oversigt.png" onmouseover="this.src='img/menuTop/oversigt-hover.png'" onmouseout="this.src='img/menuTop/oversigt.png'" alt="Oversigt" /></a>
                 <div id="sub1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> 
                     <a class="subDot" href="oversigt.php">Oversigt</a> <br>
                     <a class="subDot" href="notifikationer.php">Notifikationer</a> <br>
                     <a class="subDot" href="">Arena</a> <br>
                     <a class="subDot" href="">Post</a> <br>
                     <a class="subDot" href="">Seneste indlæg</a> <br>
                 </div></li> 
 </ul>

CSS kode 

 #menuTop {
     float: left;
     margin-top: 14px;
     margin-left: 40px;
     display: inline;
     list-style-type: none;
     padding: 0px;
 }
 
 #menuTop a {
     border: 0;
 }
 
 #menuTop li {
     padding-right: 20px;
     border: 0;
     z-index: 5000;
     float: left;
 }
 
 #sub1, #sub2, #sub3, #sub4 {
     visibility: hidden;
     background: #e3e5d5;
     border-radius: 0px 0px 8px 8px;
     border-right: 3px solid #bfc3ac;
     border-bottom: 3px solid #bfc3ac;
     border-left: 3px solid #bfc3ac;
     position: absolute;
     padding: 0px 0px 8px 0px;
 }
 
 .subDot {
     display: inline-block;
 }
 
 .menuImg {
    padding-bottom: 5px;
 }
 
 #sub1 a, #sub2 a , #sub3 a, #sub4 a{
     color: #3C3D3B;
     text-decoration: none;
     padding: 4px 4px 4px 8px;
     width: 120px;
 }
 
 #sub1 a:hover, #sub2 a:hover, #sub3 a:hover, #sub4 a:hover{
     background: #bfc3ac;
     width: 120px;
     padding: 4px 4px 4px 8px;
 }