course menu!

<style>

  #menu {

    position: absolute;

    left: 0px;

    top: 0px;

    font-size:16px;

    height: 100%;

    width: 130px;

    background-color: silver;

    text-align: right; }

  #menu div {

    width: 120px;

    background-color: silver;

    cursor: default; }

  #menu a {

    width: 100%;

    font-weight: bold;

    text-align: center;

    cursor: hand; }

</style>

<div id="menu">

<div id="m1">

 <a onmouseover="en(1,2);">m1</a><br>

 ****<br>

 yyy<br>

</div>

<div id="m2">

 <a onmouseover="en(2,4)">m22</a><br>

 xxx<br>

 aaaaaa<br>

 ssssssss<br>

 XaXXX<br>

</div>

<div id="m3">

 <a onmouseover="en(3,2);">m333</a><br>

 xxx<br>

 !!!<br>

</div>

<div id="m4">

 <a onmouseover="en(4,2);">m4444</a><br>

 xxx<br>

 yyy<br>

</div>

<div id="m5">

 <a onmouseover="en(5,0);"></a><br><br><br><br><br><br>

</div>

</div>

<script>

function init() {

  ycur=new Array();

  ydes=new Array();

  he=18;

  for (i=1;i<=5;i++) {

    ycur[i]=i*he;

    ydes[i]=ycur[i];

    eval('m'+i+'.style.position="absolute";');

    eval('m'+i+'.style.top='+ycur[i]+';');

    eval('m'+i+'.style.left=0;');

    }

}

function en(id,pr) {

  for (i=1;i<=5;i++) {

    if (i<=id) { ydes[i]=i*he;}

    if (i>id) { ydes[i]=i*he+pr*20;}

  }

 mov();

}

function mov() {

  for (c=0;c<5;c++) {

    p=0;

    for (i=1;i<=5;i++) {

      if (ydes[i]>ycur[i]) { ycur[i]++; }

      else if (ydes[i]<ycur[i]) { ycur[i]--; }

      else { p++; }

      eval('m'+i+'.style.top='+ycur[i]+';');

    }

  }

  if (p<5) { setTimeout('mov();',1); }

}

init();

</script>