<html> <head> <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:lightblue} table.menu { font-size:100%; position:absolute; visibility:hidden; } </style> <script type="text/javascript"> function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } </script> </head> <body> <h3>Drop down menu</h3> <table width="100%"> <tr bgcolor="#FF8080"> <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')"> <a href="../default.asp.htm">Tutorials</a><br /> <table class="menu" id="tutorials" width="120"> <tr><td class="menu"><a href="../html/default.asp.htm">HTML</a></td></tr> <tr><td class="menu"><a href="../xhtml/default.asp.htm">XHTML</a></td></tr> <tr><td class="menu"><a href="../css/default.asp.htm">CSS</a></td></tr> <tr><td class="menu"><a href="../xml/default.asp.htm">XML</a></td></tr> <tr><td class="menu"><a href="../xsl/default.asp.htm">XSL</a></td></tr> </table> </td> <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')"> <a href="../default.asp.htm">Scripting</a><br /> <table class="menu" id="scripting" width="120"> <tr><td class="menu"><a href="../js/default.asp.htm">JavaScript</a></td></tr> <tr><td class="menu"><a href="../vbscript/default.asp.htm">VBScript</a></td></tr> <tr><td class="menu"><a href="default.asp.htm">DHTML</a></td></tr> <tr><td class="menu"><a href="../asp/default.asp.htm">ASP</a></td></tr> <tr><td class="menu"><a href="../ado/default.asp.htm">ADO</a></td></tr> </table> </td> <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')"> <a href="../site/site_validate.asp.htm">Validation</a><br /> <table class="menu" id="validation" width="120"> <tr><td class="menu"><a href="../site/site_validate.asp.htm">Validate HTML</a></td></tr> <tr><td class="menu"><a href="../site/site_validate.asp.htm">Validate XHTML</a></td></tr> <tr><td class="menu"><a href="../site/site_validate.asp.htm">Validate CSS</a></td></tr> <tr><td class="menu"><a href="../site/site_validate.asp.htm">Validate XML</a></td></tr> <tr><td class="menu"><a href="../site/site_validate.asp.htm">Validate WML</a></td></tr> </table> </td> </tr> </table> <p>Mouse over these options to see the drop down menus</p> </body> </html>
Your Result:
Edit the code above and click to see the result.
W3Schools.com
- Try it yourself