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;}

URL 1

URL 2

URL 3

URL 4

URL 5

URL 6

URL 7

URL 8

URL 1

URL 2

UR开发者_如何学运维L 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

Your <div>s don't balance. You have two closing </div>s for every opening one.

Clearing the timeout won't reset the object position -- since the variable mov is shared, this will lead to problematic operations during transitions. You get the "last" move value even though the new element being moved is not aligned accordingly.

Possible Fixes:

Always get the item position from the CSS value -- this will keep a per-item position (this is also how animation in jQuery works).
Keep a lookup (or binding) per item moving that maintains the position. Although, I would use the former as it's simpler. For the next part (maintaining the timer ids) #2 will used though :-)

In addition you will need to keep the timers running until an operation has been complete (not just a transition has occurred). That is, the shared stopUp and stopDown values will lead to similar problems as with the above shared mov. (This is handled transparently with jQuery animation queues). However, #1 from above does not work well here. So, let's explore using #2 with closure bindings -- this requires that the click events are attached in code.

function addFlyout (elm) {
   var timerId
   elm.onmouseover = function () {
      // now can use timerId and it will only be accessible
      // to things within *this* invocation of addFlyout, including
      // inside here.
      timerId = setTimeout(function () {
         ...
         if (needToDoMore) {
           // it's easy to reference the anonymous function inside
           // with arguments.callee. alternatively, setInterval could be used
           timerId = setTimeout(arguments.callee, ...)
         }
      }, ...);
   }
   elm.onmouseout = function () {
      // ditto
   }
}
...
addFlyout(document.getElementById("Menu1"))

The Jibbering JS Closure Notes contains lots of useful information. This approach could also be used for mov, but, as above, I think it's easier just to always get the current CSS value in that case.

Also, verify your markup (avoids other browser nonsense) and be aware of issues with onmouseover/out -- if the moved element moves over (or changes the shape of) the element handling the mouse events there can be issues with the events being triggered or missed.

Using jQuery -- or a similar cross-browser framework -- can simplify the code and handle the above case trivially. (jQuery even comes with a built-in animation function too!)

jQuery (without using a pre-made system), would look something similar to:

// get all elements to apply animation to
var elements = $("#Menu1").add("#Menu2").add("#Menu3")
elements.hover(function () { // over
  $(this).stop().animate({top: 140})
}, function () { // out
  $(this).stop().animate({top: 0})
})

Guess what I'd recommend :-)

Happy coding.