Layer-Menu - Laves om fra onclick til mouseover/out

Hej.

Jeg har en dropdown-menu (baseret på javascript og CSS), som dukker frem når jeg klikker på den. Men den skal komme frem ved mouseover, og gå væk ved mouseout. Jeg har næsten fået det til at virke. Desværre forsvinder selve menuen, når jeg fjerner musen fra linket, og bevæger den ned i den nykomne menu. Kan dette løses ?

Min kode - først et javascript der styre menuen :

<script type="text/javascript">
function visSkjulDiv(d){
st = document.getElementById(d).style;
if(st.display=='block')st.display='none'
else st.display='block';
}

function posDiv(){
  elm = document.getElementById('refElement');
  for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
  divStyle = document.getElementById('lokalDiv').style
  divStyle.top = zy + 21 + 'px';//du kan så lægge lidt til eller trække fra til den præcise position
  divStyle.left = zx + 'px';

  elm = document.getElementById('underLink1');
  for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
  divStyle = document.getElementById('underMenu1').style
  divStyle.top = zy + 21 + 'px';//du kan så lægge lidt til eller trække fra til den præcise position
  divStyle.left = zx + 'px';

  elm = document.getElementById('underLink2');
  for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
  divStyle = document.getElementById('underMenu2').style
  divStyle.top = zy + 21 + 'px';//du kan så lægge lidt til eller trække fra til den præcise position
  divStyle.left = zx + 'px';

}
</script>


Så lidt html, der udskriver menuen :

<a href="http://www.jubii.dk" onmouseover="visSkjulDiv('lokalDiv')" id="refElement">Lokalt</a>
 
  <div id="lokalDiv" class="lokalt" style="display:none"> MENU<br>
  <a href="#" onclick="visSkjulDiv('underMenu1')" id="underLink1"> Lokalt</a><br>
  <a href="#" onclick="visSkjulDiv('underMenu2')" id="underLink2"> Lokalt</a><br>
  </div>
 
  <div id="underMenu1" style="display:none;">
  <a href="http://hans-side.html">Besøg Hans</a>
  <a href="http://grete-side.html">Besøg Grete</a>
  </div>

  <div id="underMenu2" style="display:none;">
  <a href="http://soeren-side.html">Besøg S&oslash;ren</a>
  <a href="http://merete-side.html">Besøg Merete</a>
  </div>

Endelig CSS'et, der bestemmer form og farve (mangler class til underpunkterne..)

.lokalt {
position:absolute;
z-index:1;
width: 100px;
height: 100px;
border: 1px #000000 solid;
background-color: #8080FF;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
text-align: left;
}

Jeg håber i gider/kan hjælpe :)