Links Submenu On MouseOver

This script Will create a list of main links that will pop up a submenu of links when someone places their mouse oveR the main link.

Insert this code where you want the menu to appear:

<!-- These are the links for the mouseover submenus. Change the link addresses and link names to reflect your desired links. You can add more links, but all links must stay on the same line and you will need to change the 'showit' number to the next subsequent number, ie: showit(1), showit(2) and so on --> <A href="http://www.Link0.com/" onMouseover="showit(0)">Link 0</a> | <a href="http://www.Link1.com/" onMouseover="showit(1)">Link 1</A><br> <!-- Edit the width of 160 and height of 20 to change the size of the submenu Edit the bgColor of F0E68C to change the background color of the submenu --> <ILAYER width=160 height=20 name="dep1" bgColor="#F0E68C"> <!-- Change the width and height to the same as above --> <LAYER name="dep1" width=160 height=20> </LAYER> </ILAYER> <!-- Change the background-color, width and height to the same as above --> <DIV id="describe" style="background-color:#F0E68C;width:160px;height:20px" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></DIV> <SCRIPT language="JavaScript1.2"> var submenu=new Array() // These are the links that will appear in the submenu. Change the link addreesses and names to // your desired links. If you added main links above, you will need to add the submenu links here. // Number each submenu to read the same number as the main link above, ie: submenu[0] and showit(0) // For each submenu, all the links must stay on the same line submenu[0]='<font size="2" face="Verdana"><b><a href="http://www.Link1.com/">Link 1</a> | <a href="http://www.Link2.com/">Link 2</a> | <a href="http://www.Link3.com/">Link 3</a></b></font>' submenu[1]='<font size="2" face="Verdana"><b><a href="http://www.Link4.com/">Link 4</a> | <a href="http://www.Link5.com/">Link 5</a> | <a href="http://www.Link6.com/">Link 6</a></b></font>' // Edit the 10 to change the time delay before the submenu disappears // after the mouse pointer is removed from the main link var delay_hide=10 // Do not edit anything else below this line var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : "" function showit(which){ clear_delayhide() thecontent=(which==-1)? "" : submenu[which] if (document.getElementById||document.all) menuobj.innerHTML=thecontent else if (document.layers){ menuobj.document.write(thecontent) menuobj.document.close() } } function resetit(e){ if (document.all&&!menuobj.contains(e.toElement)) delayhide=setTimeout("showit(-1)",delay_hide) else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) delayhide=setTimeout("showit(-1)",delay_hide) } function clear_delayhide(){ if (window.delayhide) clearTimeout(delayhide) } function contains_ns6(a, b) { while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } </SCRIPT>