Multicolumn Menu

Hi All,

Today I am presenting multicolumn menu using html and javascript. This is very useful in terms of performance because no external files like javascript, css are required. I have used single HTML page.

See below html page

<html>
<head>
<title>Multicolumn Menu</title>
<style type="text/css">
a.submenulink:link{font-size: 10px;font-family: arial,verdana;color: #67625F;text-decoration:none;}
a.submenulink:visited{font-size: 10px;font-family: arial,verdana;color: #67625F;text-decoration:none;}
a.submenulink:hover{font-size: 10px;font-family: arial,verdana;color: #807975;text-decoration:underline;}
.menuheader{font-size: 12px;background: #67625f;float: left;font-family: arial,verdana; width:175px;}
.menuheader ul{margin: 0px;padding: 0px;list-style-type: none;}
.menuheader li{float: left;}
.menuheader a{padding-left: 10px;padding-right: 10px;padding-top: 5px;padding-bottom: 5px;display: block;font-weight: bold;font-size: 12px;color: #fff;font-family: verdana,arial;text-decoration:none;}
.submenu{padding: 3px;visibility: hidden;width: 250px;position: absolute;background-color: #fff;border: 1px solid #999;filter: alpha(opacity=95);opacity: 0.9;}
</style>
<script type="text/javascript" language="javascript">
function showMenuFirst(isVisible){document.getElementById("menuFirst").style.visibility = isVisible ? "visible" : "hidden";}
function showMenuSecond(isVisible){document.getElementById("menuSecond").style.visibility = isVisible ? "visible" : "hidden";}
</script>
</head>
<body style="background-color: #8C8682;">
<div style="left: 0px; position: relative; top: 18px; text-align: left">
<div id="menuFirst" onmouseover="showMenuFirst(1)" style="left: 10px;" onmouseout="showMenuFirst(0)">
<table cellspacing="0" cellpadding="2" width="100%" border="0">
<tr>
<td><a href="#">First First</a></td>
<td><a href="#">Second First</a></td>
<td><a href="#">Third First</a></td>
</tr>
<tr>
<td><a href="#">First Second</a></td>
<td><a href="#">Second Second</a></td>
<td><a href="#">Third Second</a></td>
</tr>
</table>
</div>
</div>
<div style="left: 0px; position: relative; top: 18px; text-align: left">
<div id="menuSecond" onmouseover="showMenuSecond(1)" style="left: 60px;" onmouseout="showMenuSecond(0)">
<table cellspacing="0" cellpadding="2" width="100%" border="0">
<tr>
<td width="50%"><a href="#">First First</a></td>
<td width="50%"><a href="#">Second Second</a></td>
</tr>
</table>
</div>
</div>
<div>
<ul>
<li onmouseover="showMenuFirst(1)" onmouseout="showMenuFirst(0)"><a href="#">First</a></li>
<li onmouseover="showMenuSecond(1)" onmouseout="showMenuSecond(0)"><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
</div>
</body>
</html>

I have also attached the file. You can download it from here, multicolumnmenu