Create a new file with the name "vertical_menu.htm" then copy and paste the following code snippet in it:
<html>
<head>
<style>
<!--
table{padding:0px; border:1px #000000 solid; border-collapse:collapse}
table.tutor{font-size:14px;font-weight:bold;background:#FF8080}
table.tutor span{margin-left:5px;
width:150px}
table.tutor a{color:#FFFFFF;text-decoration:none;font:bold; display:block;
clear:both; width:120px;border-top:#000000 1px solid;border-bottom:#000000 1px solid;border-left:#000000 1px solid;border-right:#000000 1px solid;padding:5px}
table.tutor a:hover{background:#0066FF}
table.tutor tr.nav{cursor:pointer; padding:0px; padding-bottom:5px; padding-top:1px; width:150px;border-top:#000000 1px solid;border-bottom:#000000 1px solid;border-left:#000000 1px solid;border-right:#000000 1px solid;}
table.tutor tr.nav td.nav_td{ width:150px; height:30px}
table.tutor td.menu
{
font-size:14px;
position:absolute;
display:none;
width:132px;
margin-left:0px;
margin-top:0px;
background:#00CCFF;
cursor:pointer;
padding:0px;
}
-->
</style>
<script type="text/javascript">
<!--
function showmenu(what,elmnt)
{
document.getElementById(elmnt).style.display="block";
what.style.background="#0000AA";
what.style.color="#FFFFFF";
}
function hidemenu(what,elmnt)
{
document.getElementById(elmnt).style.display="none";
what.style.background="#FF8080";
what.style.color="#000000";
}
//-->
</script>
</head>
<body>
<table class="tutor">
<tr class="nav" onmouseover="showmenu(this,'tutorials')" onmouseout="hidemenu(this,'tutorials')">
<td class="nav_td">
<span>Tutorials</span></td>
<td class="menu" id="tutorials">
<a href="#">HTML</a>
<a href="#">XHTML</a>
<a href="#">CSS</a>
<a href="#">XML</a>
<a href="#">XSL</a>
</td>
</tr>
<tr class="nav" onmouseover="showmenu(this,'scripting')" onmouseout="hidemenu(this,'scripting')">
<td class="nav_td">
<span>Scripting</span></td>
<td class="menu" id="scripting">
<a href="#">JavaScript</a>
<a href="#">VBScript</a>
<a href="#">DHTML</a>
<a href="#">ASP</a>
<a href="#">ADO</a>
</td>
</tr>
<tr class="nav" onmouseover="showmenu(this,'validation')" onmouseout="hidemenu(this,'validation')">
<td class="nav_td">
<span>Validation</span></td>
<td class="menu" id="validation">
<a href="#">Validate HTML</a>
<a href="#">Validate XHTML</a>
<a href="#">Validate CSS</a>
<a href="#">Validate XML</a>
<a href="#">Validate WML</a>
</td>
</tr>
</table>
</body>
</html>
