this is so far a very hacked up example but, this is bascially what needs to happen with the addition of figuring out how to get the menus to stay.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Floated column example</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function() {
var links = document.getElementsByTagName('a');
var list = document.getElementsByTagName('menu');
for(x in links) {
links[x].onmouseover = function() {
var el = this.parentNode.nextSibling.nextSibling;
el.style.display='block';
}
links[x].onmouseout = function() {
var el = this.parentNode.nextSibling.nextSibling;
el.style.display = 'none';
}
}
}
</script>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#menu {
padding: 0;
margin: 0;
list-style-type: none;
border: thin solid black;
width: 150px;
}
#menu li {
padding: 0;
margin: 0;
border-bottom: thin solid black;
}
#menu ul {
border: thin solid black;
margin-top: -17px;
width: 200px;
padding: 0;
position: absolute;
left: 150px;
display: none;
list-style-type: none;
}
#menu ul li {
margin: 0;
padding: 0;
text-decoration: none;
}
#menu li a {
text-decoration: none;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="">35-200 kW</a></li>
<ul>
<li>WPE Packages</li>
<li>75 dBA Packages</li>
</ul>
<li><a href="">230-2000 kW</a></li>
<ul>
<li>WPH Packages</li>
<li>WPE Packages</li>
<li>l1 SAH Packages</li>
<li>L1 SAE packages</li>
<li>L2 SAH packages</li>
<li>L2 SAE Packages</li>
</ul>
<li><a href="">35-150 kW Nat Gas</a></li>
<ul>
<li>WPE NG Packages</li>
<li>75 dBA NG Packages</li>
</ul>
</ul>
</body>
</html>