ragazzi sto provando a crearmi un menu col le mie manine... niente di che deve essere un menu a comparsa attivato dall'evento onmouseover

guardano altri siti sono arrivato a questa conclusione (lasciate stare la mancanza di alcuni tag fondamentali come <html> e <body>):
codice:
<script>

function mostra(cosa) {
 cosa.style.visibility='visible';
}

function rispristina() {
menu1.style.visibility='hidden';
menu2.style.visibility='hidden';
menu3.style.visibility='hidden';
menu4.style.visibility='hidden';
}


</script>
<body onload="ripristina()">

<table border=1>

<tr>

<td>
 <div>
  <div onmouseover="mostra(menu1)" onmouseout="rispristina()"><a href=#>2</div>
  <div onmouseover="mostra(menu3)" onmouseout="rispristina()"><a href=#>4</div>
 </div>
</td>
<td width=50>

 <div id="menu1">
  <div><a href=#>1-B</div>
  <div><a href=#>1-D</div>
 </div>
 <div id="menu2">
  <div><a href=#>2-B</div>
  <div><a href=#>2-D</div>
 </div>
 <div id="menu3">
  <div><a href=#>3-B</div>
  <div><a href=#>3-D</div>
 </div>
 <div id="menu4">
  <div><a href=#>4-B</div>
  <div><a href=#>4-D</div>
 </div> 

</td>
</table>
qualcosa di corretto cè???
ho però due problemini...
- all'apertura della pagina i menu si vedono mentre dovrebbero essere hidden
- quando vado sopra un link onmouseover il menu che deve comparire viene posizionato (giustamente) in basso (tranne per il menu1 :-) )...come risolto sto problema??

grazie a tutti