Drop Down Menu

this kind of drop down menu is basicly tables within tables. Sub links appear when a mouse hovers over it.

Title 1 link link link link

Title 2 link link link link

Title 3 link link link link

Css:
<style> body{font-family:arial;} table{font-size:80%;background:black} a{color:black;text-decoration:none;font:bold} a:hover{color:#606060} td.menu{background:orange} table.menu { font-size:100%; position:absolute; visibility:hidden; } </style>
Javascript:
<script type="text/javascript"> function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } </script>
*remember those two goes inbetween your header tags
html:
<table width="100%"> <tr bgcolor="red"> <td onmouseover="showmenu('Title 1')" onmouseout="hidemenu('Title 1')"> <a href="URL HERE">Title 1</a><br /> <table class="menu" id="Title 1" width="120"> <tr><td class="menu"><a href="URL HERE">link</a></td></tr> <tr><td class="menu"><a href="URL HERE">link</a></td></tr> <tr><td class="menu"><a href="URL HERE">link</a></td></tr> <tr><td class="menu"><a href="URL HERE">link</a></td></tr> </table> </td> <td onmouseover="showmenu('Title 2')" onmouseout="hidemenu('Title 2')"> <a href="URL HERE">Title 2</a><br /> <table class="menu" id="Title 2" width="120"> <tr><td class="menu"><a href="URL HERE">link</a></td></tr> <tr><td class="menu"><a href="URL HERE">link</a></td></tr> <tr><td class="menu"><a href="URL HERE">link</a></td></tr> <tr><td class="menu"><a href="URL HERE">link</a></td></tr> </table> </td> <td onmouseover="showmenu('Title 3')" onmouseout="hidemenu('Title 3')"> <a href="URL HERE">Title 3</a><br /> <table class="menu" id="Title 3" width="120"> <tr><td class="menu"><a href="URL HERE">link</a></td></tr> <tr><td class="menu"><a href="URL HERE">link</a></td></tr> <tr><td class="menu"><a href="URL HERE">link</a></td></tr> <tr><td class="menu"><a href="URL HERE">link</a></td></tr> </table> </td> </tr> </table>
there are some things to think about while your changing and adjusting the code for your site.

1. The width of the menu is at 100% so it will stretch to the full length of whater you put it in.
2. The mouseover effect reacts with the word, not an image of the word
3. when you get to this part
    <td onmouseover="showmenu('Title 3')" onmouseout="hidemenu('Title 3')">
   <a href="URL HERE">Title 3</a><br />  <------this is the one that shows
   <table class="menu" id="Title 3" width="120">
   <tr><td class="menu"><a href="URL HERE">link</a></td></tr>
   <tr><td class="menu"><a href="URL HERE">link</a></td></tr>
     Make sure that all 4 are the same name
4. Right now the main menu are all links with plain text. what I do is change them into headers, that way I can put backgrouds and change the font and color