Dynamic Drop Down Menu

Currently only works in Internet Explorer!

Click here
Body Blah Blah Blah

CSS and Javacript in the <HEAD>

<script language="JavaScript">
//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href=#>Menu1 link 1 here</a><br>'
menu1[1]='<a href=#>Menu1 link 2 here</a><br>'
menu1[2]='<a href=#>Menu1 link 3 here</a><br>'
//Contents for menu 2
var menu2=new Array()
menu2[0]='<a href=#>Menu2 link 1 here</a><br>'
menu2[1]='<a href=#>Menu3 link 2 here</a><br>'
menu2[2]='<a href=#>Menu2 link 3 here</a><br>'
</script>

<style>
<!--
.iewrap1{
position:relative;
height:30px;
}
.iewrap2{
position:absolute;
}
#dropmenu0, #dropmenu1{
visibility:hide;
z-index:100;
}
-->
</style>

Code in for the menu

<script language="JavaScript">
//reusable//
var zindex=100
function dropit2(whichone){
if (window.themenu&&themenu.id!=whichone.id)
themenu.style.visibility="hidden"
themenu=whichone
if (document.all){
themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX
themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (themenu.style.visibility=="hidden"){
themenu.style.visibility="visible"
themenu.style.zIndex=zindex++
}
else{
hidemenu()
}
}
}

function dropit(e,whichone){
if (window.themenu&&themenu.id!=eval(whichone).id)
themenu.visibility="hide"
themenu=eval(whichone)
if (themenu.visibility=="hide")
themenu.visibility="show"
else
themenu.visibility="hide"
themenu.zIndex++
themenu.left=e.pageX-e.layerX
themenu.top=e.pageY-e.layerY+19
return false
}

function hidemenu(whichone){
if (window.themenu)
themenu.style.visibility="hidden"
}

function hidemenu2(){
themenu.visibility="hide"
}

if (document.all)
document.body.onclick=hidemenu

//reusable/////////////////////////////
</script>
<!----------Menu 1 starts here---------->
<ilayer height="35px">
<layer visibility="show">
<span class="iewrap2" onClick="dropit2(dropmenu0);event.cancelBubble=true;return false"><font face="Arial"><b><a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu0')">

<p>Click here</a></b></font> </span>
<p>
<p>
<p></layer> </ilayer><br>
<!----------Menu 1 ends here---------->
<!----------Menu 2 starts here---------->
<ilayer height="35px">
<layer visibility="show">
<span class="iewrap2" onClick="dropit2(dropmenu1);event.cancelBubble=true;return false">
<font face="Verdana"><b><a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu1')">Click here</a></b></font>
</span></layer> </ilayer><br>
<!----------Menu 2 ends here---------->
<!-- Body Text Goes Here -->
Body Blah Blah Blah 
<!-- End Body Text --> 
<!-- End Menu Code --> 
<div id="dropmenu0" style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript">
if (document.all)
dropmenu0.style.padding="4px"
for (i=0;i<menu1.length;i++)
document.write(menu1[i])
</script>
</div><script language="JavaScript">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu2
}
</script>
<div id="dropmenu1" style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript">
if (document.all)
dropmenu1.style.padding="4px"
for (i=0;i<menu2.length;i++)
document.write(menu2[i])
</script>
</div><script language="JavaScript">
if (document.layers){
document.dropmenu1.captureEvents(Event.CLICK)
document.dropmenu1.onclick=hidemenu2
}
</script>