For testing this code click here.
For code see below:
<style>
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>
<table width=”100%” border=”0″>
<tr>
<td onMouseOver=”showmenu(‘tutorials’)” onMouseOut=”hidemenu(‘tutorials’)”><a href=”javascript:void(0)”>menu1</a>
<table class=”menu” id=”tutorials” width=”100″ border=”0″>
<tr><td class=”menu”><a href=”menu1.1.html”>menu1_1</a></td></tr>
<tr><td class=”menu”>menu1_2</td></tr>
<tr><td class=”menu”>menu1_3</td></tr>
<tr><td class=”menu”>menu1_4</td></tr>
<tr><td class=”menu”>menu1_5</td></tr>
</table>
</td>
<td onMouseOver=”showmenu(‘tutorials1′)” onMouseOut=”hidemenu(‘tutorials1′)”><a href=”javascript:void(0)”>menu2</a>
<table class=”menu” id=”tutorials1″ width=”100″ border=”0″>
<tr><td class=”menu”><a href=”menu2.1.html”>menu2_1</a></td></tr>
<tr><td class=”menu”>menu2_2</td></tr>
<tr><td class=”menu”>menu2_3</td></tr>
<tr><td class=”menu”>menu2_4</td></tr>
<tr><td class=”menu”>menu2_5</td></tr>
</table>
</td>
<td onMouseOver=”showmenu(‘tutorials2′)” onMouseOut=”hidemenu(‘tutorials2′)”><a href=”javascript:void(0)”>menu3</a>
<table class=”menu” id=”tutorials2″ width=”100″ border=”0″>
<tr><td class=”menu”><a href=”menu3.1.html”>menu3_1</a></td></tr>
<tr><td class=”menu”>menu3_2</td></tr>
<tr><td class=”menu”>menu3_3</td></tr>
<tr><td class=”menu”>menu3_4</td></tr>
<tr><td class=”menu”>menu3_5</td></tr>
</table>
</td>
<td onMouseOver=”showmenu(‘tutorials3′)” onMouseOut=”hidemenu(‘tutorials3′)”><a href=”javascript:void(0)”>menu4</a>
<table class=”menu” id=”tutorials3″ width=”100″ border=”0″>
<tr><td class=”menu”><a href=”menu4.1.html”>menu4_1</a></td></tr>
<tr><td class=”menu”>menu4_2</td></tr>
<tr><td class=”menu”>menu4_3</td></tr>
<tr><td class=”menu”>menu4_4</td></tr>
<tr><td class=”menu”>menu4_5</td></tr>
</table>
</td>
</tr>
</table>