Creating horizontal drop-down menu with HTML, CSS and JavaScript is quite easy.
Create a new file with the name "horizontal_menu.htm" then copy and paste the following codes in it:
<html>
<head>
<style>
<!--
table.tutor{font-size:14px;font-weight:bold;background:black}
table.tutor span{margin-left:5px}
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 td{cursor:pointer; padding:0px; padding-top:10px; width:120px;}
table.tutor td.menu{background:#00CCFF; cursor:pointer; padding:0px;}
table.tutor.menu
{
font-size:14px;
position:absolute;
display:none;
width:120px
}
-->
</style>
<script type="text/javascript">
<!--
function showmenu(what,elmnt)
{
document.all(elmnt).style.display="block";
what.style.background="#00CCFF";
what.style.color="#FFFFFF";
}
function hidemenu(what,elmnt)
{
document.all(elmnt).style.display="none";
what.style.background="#FF8080";
what.style.color="#000000";
}
//-->
</script>
</head>
<body>
<table class="tutor">
<tr bgcolor="#FF8080">
<td onmouseover="showmenu(this,'tutorials')" onmouseout="hidemenu(this,'tutorials')">
<span>Tutorials</span><br />
<table class="menu" id="tutorials">
<tr><td class="menu"><a href="#">HTML</a>
<a href="#">XHTML</a>
<a href="#">CSS</a>
<a href="#">XML</a>
<a href="#">XSL</a></td></tr>
</table>
</td>
<td onmouseover="showmenu(this,'scripting')" onmouseout="hidemenu(this,'scripting')">
<span>Scripting</span><br />
<table class="menu" id="scripting">
<tr><td class="menu"><a href="#">JavaScript</a>
<a href="#">VBScript</a>
<a href="#">DHTML</a>
<a href="#">ASP</a>
<a href="#">ADO</a></td></tr>
</table>
</td>
<td onmouseover="showmenu(this,'validation')" onmouseout="hidemenu(this,'validation')">
<span>Validation</span><br />
<table class="menu" id="validation">
<tr><td class="menu"><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>
</td>
</tr>
</table>
</body>
</html> 