Multi drop-down menu

[CrazyJ]

Ik ben bezig met het aanpassen van een website maar nu moet ik van een drop-down menu naar een multidrop-down menu. Maar ik heb geen idee hoe ik dit aan moet
pakken. Als ik een veld toevoeg opent deze wel maar het menu ervoor gaat dicht.
Wie kan mij hiermee helpen of heeft een voorbeeld? Heb al heel wat gegoogeld maar
nog niets gevonden. Het bestaabde menu is als volgt opgebouwd:
----------------------------------------------------------------------------------------------------------------------------------
<script type="text/javascript">
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{ // cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose; // -->
</script>

----------------------------------------------------------------------------------------------------------------------------------
<ul>
<li><a href="verkoop.html" onmouseover="mopen('m3')" onmouseout="mclosetime()">Verkoop</a> </li>

<li><b href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Bouwadvies &amp; Begeleiding</b>

<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="bouw.html">Bouw</a>
<a href="begeleiding.html">Begeleiding</a>

</li>

<li><a href="index.html" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a> </li>

</ul>
----------------------------------------------------------------------------------------------------------------------------------
CSS
#ddm
{
margin: 0;
padding: 0;
z-index: 30;
position: right;
}

#ddm li
{
padding: 0;
list-style: none;
float: right;
font: bold 11px arial;
margin-bottom: 10%;
}

#ddm li a
{
display: block;
padding: 4px 10px;
width: 70px;
background: #005100;
color: #FFF;
text-align: center;
text-decoration: none;
}

#ddm li a:hover
{ background: #14ca06}

#ddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}

#ddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: Black;
font: 11px arial}

#ddm div a:hover
{ background: #14ca06;
color: #FFF}