Javascript sliding menu stay open. clearTimeout not working as expected -can you help me please 

```
<html>
<head>
<style>
#Menu1 {position:absolute;
 top:-190px; left:150px;
 font-size:15px;visibility:visible;
 background-color:#D0BCFE;
 width:114px;z-index:0;border-style:solid;
 }
#Menu2 {position:absolute;
 top:-190px; left:580px;
 font-size:15px;visibility:visible;
 background-color:#D0BCFE;
 width:114px;z-index:0;border-style:solid;
 }
#Menu3 {position:absolute;
 top:-190px; left:1005px;
 font-size:15px;visibility:visible;
 background-color:#D0BCFE;
 width:114px;z-index:0;border-style:solid;
 }

TD.TDHREFMENUS{font-size:20;color:red;position:relative;z-index:0;background-color:#C4ABFE;border-style:solid;width:114px;}
</style>
<script>

var stopUp=null;
var stopDown=null;
var mov=-143;
var on;

function down(id){

    if (!on){
       on=true;
       clearTimeout(stopUp)
       stopUp=null;
    }

    var obj=document.getElementById(id)
    obj.style.top=mov +"px";
    if (mov <=27){
       mov+=2;
       stopDown=setTimeout(function (){ down(id) }, 20)
    }
}

function up(id){

    if (on){
       on=false;
       clearTimeout(stopDown)
       stopDown=null; 
    }

    var obj=document.getElementById(id)
    obj.style.top=mov +"px";
    if (mov >=-143){
       mov-=2;
       stopUp=setTimeout(function(){ up(id)}, 20);
    }

}

</script>

</head>

<body leftmargin=0 marginwidth=0 topmargin=0 marginheight=0>

<div id="Menu1" onmouseover="down('Menu1')" onmouseout="up('Menu1')">
URL 1<br>
URL 2<br>
URL 3<br>
URL 4<br>
URL 5<br>
URL 6<br>
URL 7<br>
URL 8<br>
</div>
</div>

<div id="Menu2" onmouseover="down('Menu2')" onmouseout="up('Menu2')">
URL 1<br>
URL 2<br>
URL 3<br>
URL 4<br>
URL 5<br>
URL 6<br>
URL 7<br>
URL 8<br>
</div>
</div>

<div id="Menu3" onmouseover="down('Menu3')" onmouseout="up('Menu3')">
URL 1<br>
URL 2<br>
URL 3<br>
URL 4<br>
URL 5<br>
URL 6<br>
URL 7<br>
URL 8<br>
</div>
</div>

<TABLE cellSpacing=0 cellPadding=0 BORDER=1 WIDTH=100%>
<TBODY>
<TR>
<TD align=middle CLASS="TDHREFMENUS"><span onmouseover="down('Menu1')" onmouseout="up('Menu1')">MENU 1</span>
</TD>
<TD align=middle CLASS="TDHREFMENUS"><span onmouseover="down('Menu2')" onmouseout="up('Menu2')">MENU 2</span>
</TD>
<TD align=middle CLASS="TDHREFMENUS"><span onmouseover="down('Menu3')" onmouseout="up('Menu3')">MENU 3</span>
</TD>
</TR>
</TBODY>
</TABLE>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<html>
<head>
```

EDIT:
When I tested it worked if I hovered over a single menu, but if I moved my mouse quickly over a few of the menus, the first one worked but the others menus also stop.

Menu1 {position:absolute;
=========================

```
top:-190px; left:150px;
font-size:15px;visibility:visible;
background-color:#D0BCFE;
width:114px;z-index:0;border-style:solid;
}

```

Menu2 {position:absolute;
=========================

```
top:-190px; left:580px;
font-size:15px;visibility:visible;
background-color:#D0BCFE;
width:114px;z-index:0;border-style:solid;
}

```

Menu3 {position:absolute;
=========================

```
top:-190px; left:1005px;
font-size:15px;visibility:visible;
background-color:#D0BCFE;
width:114px;z-index:0;border-style:solid;
}

```

TD.TDHREFMENUS{font-size:20;color:red;position:relative;z-index:0;background-color:#C4ABFE;border-style:solid;width:114px;}

var stopUp=null;
var stopDown=null;
var mov=-143;
var on;

function down(id){

if (!on){
on=true;
clearTimeout(stopUp)
stopUp=null;

}

var obj=document.getElementById(id)
obj.style.top=mov +"px";
if (mov =-143){
mov-=2;
stopUp=setTimeout(function(){
up(id)}, 20);
}

}

URL 1  

URL 2  

URL 3  

URL 4  

URL 5  

URL 6  

URL 7  

URL 8  

URL 1  

URL 2  

URL 3  

URL 4  

URL 5  

URL 6  

URL 7  

URL 8  

URL 1  

URL 2  

URL 3  

URL 4  

URL 5  

URL 6  

URL 7  

URL 8  

MENU 1

MENU 2

MENU 3