<!--Basic demonstration of how to build a DHTML menu for IE and Netscape 6 the fast way.-->

<HTML>
<HEAD>
<TITLE> Dynamic Positioning Test Page </TITLE>
<script language="JavaScript">
<!--
function returnObject(object) {
return (document.all) ? document.all[object].style:document.getElementById(object).style;
}
//-->
</script>

</HEAD>
<BODY leftmargin="0" marginwidth="0" marginheight="50" topmargin="50">
<div align="center">
<span id="menu1" style="visibility:hidden;position:absolute;padding:5px;background-color:Red;width:100"
onmouseover="this.style.visibility='visible'"
onmouseout="this.style.visibility='hidden'">
Menu 1
</span>

<span id="menu2" style="visibility:hidden;position:absolute;padding:5px;background-color:Red;width:100"
onmouseover="this.style.visibility='visible'"
onmouseout="this.style.visibility='hidden'">
Menu 2
</span>
<a href="#"
onmouseover="returnObject('menu1').left=this.offsetLeft;
returnObject('menu1').pixelTop=this.offsetHeight + this.offsetTop + 50; // marginheight
returnObject('menu1').visibility='visible'"
onmouseout="returnObject('menu1').visibility='hidden'">
Toon menu 1
</a>
   
<a href="#"
onmouseover="returnObject('menu2').left=this.offsetLeft ;
returnObject('menu2').pixelTop=this.offsetHeight + this.offsetTop + 50; // marginheight
returnObject('menu2').visibility='visible'"
onmouseout="returnObject('menu2').visibility='hidden'">
Toon menu 2
</a>
</div>
</BODY>
</HTML>