Try this one:
<html>
<head>
<title>Request Code - Sub Menu on Click</title>
<SCRIPT LANGUAGE="javascript">
var themenu=""
var oldmenu=""
var count=0
/* You need to add a separate array for each link and then add the entries for each link that will display
on the submenu. if you add a third link then the array name would be slink2.
*/
var slink0=new Array
slink0[0]='<B><a href=page1.html>Page One</a></B><br>'
slink0[1]='<B><a href=page2.html>Page Two</a></B><br>'
slink0[2]='<B><a href=page3.html>Page Three</a></B><br>'
var slink1=new Array
slink1[0]='<B><a href=page1.html>Page One</a></B><br>'
slink1[1]='<B><a href=page2.html>Page Two</a></B><br>'
slink1[2]='<B><a href=page3.html>Page Three</a></B><br>'
/* DO NOT CHANGE THE SCRIPTS BELOW */
function droplink(e,linkd,linkdiv)
{
/* Check for Netscape 4.0+ */
if(document.layers)
{
themenu=eval("document."+linkd)
thelink=eval("document."+linkdiv)
if (themenu!=oldmenu)
{
oldmenu.visibility="hide"
oldmenu=themenu
themenu.visibility='show'
pos=thelink.left+thelink.clip.right
themenu.left=pos
themenu.top=thelink.top
}
else
{
oldmenu=""
themenu.visibility="hide"
}
}
/* Check for Internet Explorer 5.0+ */
if(document.all)
{
if(count<1)
{
themenu=eval(linkd)
thelink=eval(linkdiv)
oldmenu=linkd
themenu.style.visibility='visible'
count++
pos=thelink.style.posLeft+thelink.style.posWidth
themenu.style.left=pos
themenu.style.top=thelink.style.top
}
else
{
if(oldmenu==linkd)
{
count=0
themenu.style.visibility="hidden"
}
else
{
oldmenu=linkd
count=0
themenu.style.visibility="hidden"
themenu=eval(linkd)
thelink=eval(linkdiv)
themenu.style.visibility='visible'
count++
pos=thelink.style.posLeft+thelink.style.posWidth
themenu.style.left=pos
themenu.style.top=thelink.style.top
}
}
}
else
{
/* For Netscape 6.0 */
if(document.getElementById)
{
if (count<1)
{
elml = document.getElementById(linkdiv)
elm = document.getElementById(linkd)
count++
elm.style.visibility = "visible"
posw=parseInt(elml.style.width)
posl=parseInt(elml.style.left)
pos=posw+posl
elm.style.left=pos
elm.style.top=elml.style.top
}
else
{
if(elm.id==linkd)
{
count=0
elm.style.visibility="hidden"
}
else
{
count=0
elm.style.visibility="hidden"
elml = document.getElementById(linkdiv)
elm = document.getElementById(linkd)
count++
elm.style.visibility = "visible"
posw=parseInt(elml.style.width)
posl=parseInt(elml.style.left)
pos=posw+posl
elm.style.left=pos
elm.style.top=elml.style.top
}
}
}
}
}
</SCRIPT>
<style>
<!--
A{text-decoration:none}
A:link {color:red}
A:visited {color:orchid}
-->
</style>
</head>
<body bgcolor="FFF8DC">
<SCRIPT>
/*There are two divs for each link, one for the link you click on to display the sub menu and one for the
sub menu. When adding more links and sub menus make sure you change the name of the
DIV's and also change the div values in the onClick that is passing values to the function droplink() to
match the div names that the link is in and the one that the sub menu will appear in. The values that
are being passed are as follows: the event(click), the div name for the sub menu and the dive name
of the link you just clicked. You must follow that order for the function to display the sub menu correctly.
*/
</SCRIPT>
<CENTER><H1>Click on a link to see a sub menu appear.</H1>
</CENTER>
<SCRIPT> /* this is the beginning of the first link and sub menu */ </SCRIPT>
<DIV ID="linka" style="position:absolute;left:10;top:80;width:65;visibility:visible">
<B><A HREF="#" onClick="return droplink(event,'link0div','linka')">Link One</A></B>
</DIV>
<DIV ID="link0div" style="position:absolute;left:0;top:0;width:90;visibility:hidden;layer-background-color:FFB6C1;background-color:FFB6C1;border:2px solid orchid;padding:0px">
<script language="JavaScript">
if (document.all)
{
link0div.style.padding="4px"
}
for (i=0;i<slink0.length;i++)
{
document.write(slink0[i])
}
</script>
</div>
<SCRIPT> /* this is the end of the first link and sub menu */ </SCRIPT>
<SCRIPT> /* this is the beginning of the second link and sub menu */ </SCRIPT>
<DIV ID="linkb" style="position:absolute;left:10;top:105;width:65;visibility:visible">
<B><A HREF="#" onClick="return droplink(event,'link1div','linkb')">Link Two</A></B>
</DIV>
<DIV ID="link1div" style="position:absolute;left:0;top:0;width:90;visibility:hidden;layer-background-color:FFB6C1;background-color:FFB6C1;border:2px solid orchid;padding:0px">
<script language="JavaScript">
if (document.all)
{
link1div.style.padding="4px"
}
for (i=0;i<slink1.length;i++)
{
document.write(slink1[i])
}
</script>
</div>
<SCRIPT> /* this is the end of the second link and sub menu */ </SCRIPT>
</body>
</html>