This is an example of how to create simple Menus in HTML using jQuery.
<html>
<head>
<title>Menus</title>
<script type='text/javascript' src='jquery-1.4.min.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
$("#divSubMenu1,#divSubMenu2,#divSubMenu3,#divSubMenu4,#divSubMenu5").hide();
$("#tdMenu1").mouseover(function()
{
$("#divSubMenu1").slideDown("slow");
$("#divSubMenu2").slideUp("fast");
$("#divSubMenu3").slideUp("fast");
$("#divSubMenu4").slideUp("fast");
$("#divSubMenu5").slideUp("fast");
});
$("#tdMenu2").mouseover(function()
{
$("#divSubMenu1").slideUp("fast");
$("#divSubMenu2").slideDown("slow");
$("#divSubMenu3").slideUp("fast");
$("#divSubMenu4").slideUp("fast");
$("#divSubMenu5").slideUp("fast");
});
$("#tdMenu3").mouseover(function()
{
$("#divSubMenu1").slideUp("fast");
$("#divSubMenu2").slideUp("fast");
$("#divSubMenu3").slideDown("slow");
$("#divSubMenu4").slideUp("fast");
$("#divSubMenu5").slideUp("fast");
});
$("#tdMenu4").mouseover(function()
{
$("#divSubMenu1").slideUp("fast");
$("#divSubMenu2").slideUp("fast");
$("#divSubMenu3").slideUp("fast");
$("#divSubMenu4").slideDown("slow");
$("#divSubMenu5").slideUp("fast");
});
$("#tdMenu5").mouseover(function()
{
$("#divSubMenu1").slideUp("fast");
$("#divSubMenu2").slideUp("fast");
$("#divSubMenu3").slideUp("fast");
$("#divSubMenu4").slideUp("fast");
$("#divSubMenu5").slideDown("slow");
});
$("#NoMenu").mouseover(function()
{
$("#divSubMenu1,#divSubMenu2,#divSubMenu3,#divSubMenu4,
#divSubMenu5").slideUp("fast");
});
$("body").click(function()
{
$("#divSubMenu1,#divSubMenu2,#divSubMenu3,#divSubMenu4,
#divSubMenu5").hide();
});
});
</script>
</head>
<body>
<div id="divMenu">
<table width="100%" id="tblMenu" cellspacing="5">
<tr style="z-index:10">
<td id="tdMenu1" style="width:20%">
<img src="Menu1.gif" width="100%"
height="30px" alt="Menu1" />
</td>
<td id="tdMenu2" style="width:20%">
<img src="Menu1.gif" width="100%"
height="30px" alt="Menu1" />
</td>
<td id="tdMenu3" style="width:20%">
<img src="Menu1.gif" width="100%"
height="30px" alt="Menu1" />
</td>
<td id="tdMenu4" style="width:20%">
<img src="Menu1.gif" width="100%"
height="30px" alt="Menu1" />
</td>
<td id="tdMenu5" style="width:20%">
<img src="Menu1.gif" width="100%"
height="30px" alt="Menu1" />
</td>
</tr>
<tr style="position:absolute; z-index:10">
<td style="width:20%;position:relative" id="tdSubMenu1">
<div id="divSubMenu1">
<table width="100%" style="border-color:Red"
id="tblSubMenu1">
<tr>
<td name="tdSubMenu1">
<img name="subMenu" onmouseover="this.src='Menu1_mouse.gif'"
onmouseout="this.src='Menu1.gif'" src="Menu1.gif"
width="100%" height="30px" alt="Menu1" />
</td>
</tr>
<tr>
<td name="tdSubMenu1">
<img name="subMenu" onmouseover="this.src='Menu1_mouse.gif'"
onmouseout="this.src='Menu1.gif'" src="Menu1.gif"
width="100%" height="30px" alt="Menu1" />
</td>
</tr>
<tr>
<td name="tdSubMenu1">
<img name="subMenu" onmouseover="this.src='Menu1_mouse.gif'"
onmouseout="this.src='Menu1.gif'" src="Menu1.gif"
width="100%" height="30px" alt="Menu1" />
</td>
</tr>
</table>
</div>
</td>
<td style="width:20%;position:relative;" id="tdSubMenu2">
<div id="divSubMenu2">
<table width="100%" style="border-color:Red" id="tblSubMenu2">
<tr>
<td name="tdSubMenu2">
<img src="Menu1.gif" onmouseover="this.src='Menu1_mouse.gif'"
onmouseout="this.src='Menu1.gif'" width="100%"
height="30px" alt="Menu1" />
</td>
</tr>
<tr>
<td name="tdSubMenu2">
<img src="Menu1.gif" onmouseover="this.src='Menu1_mouse.gif'"
onmouseout="this.src='Menu1.gif'" width="100%"
height="30px" alt="Menu1" />
</td>
</tr>
<tr>
<td name="tdSubMenu2">
<img src="Menu1.gif" onmouseover="this.src='Menu1_mouse.gif'"
onmouseout="this.src='Menu1.gif'" width="100%"
height="30px" alt="Menu1" />
</td>
</tr>
</table>
</div>
</td>
<td style="width:20%" id="tdSubMenu3">
<div id="divSubMenu3">
<table width="100%" style="border-color:Red" id="tblSubMenu3">
<tr>
<td name="tdSubMenu3">
<img src="Menu1.gif" onmouseover="this.src='Menu1_mouse.gif'"
onmouseout="this.src='Menu1.gif'" width="100%"
height="30px" alt="Menu1" />
</td>
</tr>
<tr>
<td name="tdSubMenu3">
<img src="Menu1.gif" onmouseover="this.src='Menu1_mouse.gif'"
onmouseout="this.src='Menu1.gif'" width="100%"
height="30px" alt="Menu1" />
</td>
</tr>
<tr>
<td name="tdSubMenu3">
<img src="Menu1.gif" onmouseover="this.src='Menu1_mouse.gif'"
onmouseout="this.src='Menu1.gif'" width="100%"
height="30px" alt="Menu1" />
</td>
</tr>
</table>
</div>
</td>
<td style="width:20%" id="tdSubMenu4">
<div id="divSubMenu4">
<table width="100%" style="border-color:Red" id="tblSubMenu4">
<tr>
<td name="tdSubMenu4">
<img src="Menu1.gif" onmouseover="this.src='Menu1_mouse.gif'"
onmouseout="this.src='Menu1.gif'" width="100%"
height="30px" alt="Menu1" />
</td>
</tr>
<tr>
<td name="tdSubMenu4">
<img src="Menu1.gif" onmouseover="this.src='Menu1_mouse.gif'"
onmouseout="this.src='Menu1.gif'" width="100%"
height="30px" alt="Menu1" />
</td>
</tr>
<tr>
<td name="tdSubMenu4">
<img src="Menu1.gif" onmouseover="this.src='Menu1_mouse.gif'"
onmouseout="this.src='Menu1.gif'" width="100%"
height="30px" alt="Menu1" />
</td>
</tr>
</table>
</div>
</td>
<td style="width:20%" id="tdSubMenu5">
<div id="divSubMenu5">
<table width="100%" style="border-color:Red" id="tblSubMenu5">
<tr>
<td name="tdSubMenu5">
<img src="Menu1.gif" onmouseover="this.src='Menu1_mouse.gif'"
onmouseout="this.src='Menu1.gif'" width="100%"
height="30px" alt="Menu1" />
</td>
</tr>
<tr>
<td name="tdSubMenu5">
<img src="Menu1.gif" onmouseover="this.src='Menu1_mouse.gif'"
onmouseout="this.src='Menu1.gif'" width="100%"
height="30px" alt="Menu1" />
</td>
</tr>
<tr>
<td name="tdSubMenu5">
<img src="Menu1.gif" onmouseover="this.src='Menu1_mouse.gif'"
onmouseout="this.src='Menu1.gif'" width="100%"
height="30px" alt="Menu1" />
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<div id="NoMenu" style="width:100%;height:100%">
</div>
</body>
</html>
