¤ Clicca qui per visualizzare la demo... ¤

<style>
.menuStyle {
  position: absolute;
  top: 0;
  left: 0;
  width: 200;
}
a.link {
  color: blue;
  text-decoration: none;
  font-family: Verdana;
  font-size: 12px;
}
a.link:hover {
  color: red;
  text-decoration:
  underline overline;
}
</style>
<div id="menuLayer" class="menuStyle">
<table border="0" width="200" cellspacing="0" cellpadding="0">
<tr><td bgcolor="#000000">
<table border="0" width="200" cellspacing="1" cellpadding="0">
<tr><td align="center" bgcolor="#FFFFFF">
<!-- qui va il menù -->
<br>
<a class="link" href="#">Link1</a><br><br>
<a class="link" href="#">Link2</a><br><br>
<a class="link" href="#">Link3</a><br><br>
<a class="link" href="#">Link4</a><br><br>
<a class="link" href="#">Link5</a><br><br>
<!-- fine del menù -->
</td></tr>
</table>
</td></tr>
</table>
</div>
<div id="menuTesta" class="menuStyle">
<table border="0" width="200" cellspacing="0" cellpadding="0">
<tr><td bgcolor="#000000">
<table border="0" width="200" cellspacing="0" cellpadding="0">
<tr><td align="center" height="20" bgcolor="#EEEEEE">
<a class="link" href="javascript:click()"><b><img src="bordo.gif" height="20" width="200" border="0"></img></b></a>
</td></tr>
</table>
</td></tr>
</table>
</div>

<script language="JavaScript">

var ie = (document.all) ? true : false;
var altezzaMenu = (ie) ? menuLayer.offsetHeight : document.menuLayer.document.height;
var larghezzaMenu = (ie) ? menuLayer.offsetWidth : document.menuLayer.document.width;
var altezzaTesta = (ie) ? menuTesta.offsetHeight : document.menuTesta.document.height;
(ie) ? menuLayer.style.visibility = "visible" : document.menuLayer.visibility = "visible";
(ie) ? menuTesta.style.visibility = "visible" : document.menuTesta.visibility = "visible";
var altezzaFinestra = (ie) ? document.body.offsetHeight : window.innerHeight;
altezzaFinestra -= 20;
var status = 0;

function click()
{
  if (status==0)
  {
    status = -1;
    apri();
  }
  if (status==1)
  {
    status = -1;
    chiudi();
  }
}

function apri()
{
  if (ie)
    valoreNoto = altezzaFinestra - (altezzaTesta + altezzaMenu -1 + 4) + document.body.scrollTop;
  else
    valoreNoto = altezzaFinestra - altezzaMenu - altezzaTesta - 1 + window.pageYOffset;
  x = parseInt((ie) ? menuLayer.style.left : document.menuLayer.left);
  if (x<-30)
    x += 30;
  else
    x = 0;
  (ie) ? menuLayer.style.left = x : document.menuLayer.left = x;
  y = parseInt((ie) ? menuTesta.style.top : document.menuTesta.top);
  if (y>(valoreNoto+30))
    y -= 30;
  else
    y = valoreNoto;
  (ie) ? menuTesta.style.top = y : document.menuTesta.top = y;
  if (x<0 || y>valoreNoto)
    var id = setTimeout("apri()",10);
  else
    status = 1;
}

function chiudi()
{
  if (ie)
    valoreNoto = altezzaFinestra - (altezzaTesta + 4) + document.body.scrollTop;
  else
    valoreNoto = altezzaFinestra - altezzaTesta + window.pageYOffset;
  x = parseInt((ie) ? menuLayer.style.left : document.menuLayer.left);
  if (x>30-larghezzaMenu)
    x -= 30;
  else
    x = -larghezzaMenu;
  (ie) ? menuLayer.style.left = x : document.menuLayer.left = x;
  y = parseInt((ie) ? menuTesta.style.top : document.menuTesta.top);
  if (y<(valoreNoto-30))
    y += 30;
  else
    y = valoreNoto;
  (ie) ? menuTesta.style.top = y : document.menuTesta.top = y;
  if (x>-larghezzaMenu || y<valoreNoto)
    var id = setTimeout("chiudi()",10);
  else
    status = 0;
}

function regolaPosizione(a)
{
  if (status==0)
  {
    if (ie)
    {
      menuLayer.style.top = altezzaFinestra - (altezzaMenu + 4) + document.body.scrollTop;
      menuLayer.style.left = -larghezzaMenu;
      menuTesta.style.top = altezzaFinestra - (altezzaTesta + 4) + document.body.scrollTop;
    }
    else
    {
      document.menuLayer.top = altezzaFinestra - altezzaMenu + window.pageYOffset;
      document.menuLayer.left = -larghezzaMenu;
      document.menuTesta.top = altezzaFinestra - altezzaTesta + window.pageYOffset;
    }
  }
  if (status==1)
  {
    if (ie)
    {
      menuLayer.style.top = altezzaFinestra - (altezzaMenu + 4) + document.body.scrollTop;
      menuLayer.style.left = 0;
      menuTesta.style.top = altezzaFinestra - (altezzaTesta + altezzaMenu -1 + 4) + document.body.scrollTop;
    }
    else
    {
      document.menuLayer.top = altezzaFinestra - altezzaMenu + window.pageYOffset;
      document.menuLayer.left = 0;
      document.menuTesta.top = altezzaFinestra - (altezzaTesta + altezzaMenu -1) + window.pageYOffset;
    }
  }
  var id = setTimeout("regolaPosizione()",10);
}

regolaPosizione();

</script>