Html menus on mouse hover

Following example will illustrate html menus using javascript, html, css. In this example, initially the menu table is hidden, whenever we hover on link the table visibility is set to visible and whenever we move mouse out we again set it’s visibility to hidden.

Example

<html>
<head>
<style>
a {
	color: black;
	text-decoration: none;
	font: bold
}
td.menu {
	background:#FC0;
}
table.menu {
	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="200px;">
  <tr bgcolor="#E9E9E9">
    <td onMouseOver="showmenu('tutorials')" onMouseOut="hidemenu('tutorials')">
    <a href="Menubar1.jsp">Hover on this</a>
      <table class="menu" id="tutorials" width="120">
        <tr>
          <td class="menu"><a href="Page1.jsp">Page1 link</a></td>
        </tr>
        <tr>
          <td class="menu"><a href="Page2.jsp">Page2 Link</a></td>
        </tr>
      </table></td>
  </tr>
</table>
<p>Mouse over events</p>
</body>
</html>

Output

Untitled