Jak uzyskać, żeby rozwijane menu nachodziło na elementy HTML

Mam problem z rozwijanym menu, a mianowicie jak się rozwija to nie nachodzi na żaden element

<a href=# id="a" onmouseover="pokaz()"; onmouseout="ukryj()">menu</a><br>
<a href=a1.htm id="a1" style="visibility: hidden" onmouseover="pokaz()" onmouseout="ukryj()">menu</a><br>
<a href=a2.htm id="a2" style="visibility: hidden" onmouseover="pokaz()" onmouseout="ukryj()">menu</a><br>
<a href=a3.htm id="a3" style="visibility: hidden" onmouseover="pokaz()" onmouseout="ukryj()">menu</a><br>
<a href=a4.htm id="a4" style="visibility: hidden" onmouseover="pokaz()" onmouseout="ukryj()">menu</a><br>
<font >sdjfsj</font>

<script language="javascript">
function pokaz() {

document.getElementById("a1").style['visibility'] = "visible";
document.getElementById("a2").style['visibility'] = "visible";
document.getElementById("a3").style['visibility'] = "visible";
document.getElementById("a4").style['visibility'] = "visible";

}
function ukryj() {

document.getElementById("a1").style['visibility'] = "hidden";
document.getElementById("a2").style['visibility'] = "hidden";
document.getElementById("a3").style['visibility'] = "hidden";
document.getElementById("a4").style['visibility'] = "hidden";

}
</script>

I nawet jak te cztery hiperłącza sa ukryte to napis "sdjfsj" znajduje się pod tymi czterema hiperłączami czyli to wygląda jak by miał 4
, a ja chcę uzyskać taki efekt, że jak najade myszką na pierwsze menu to te hiperłącza zasłonią ten tekst.

Poczytaj o position: relative; i position: absolute;

Znajdź też inne źródła swojej wiedzy, bo <script> nie ma czegoś takiego jak atrybut language.

Aha, i takie rzeczy powinieneś w sumie zrobić w CSS. Szukaj za multi level css menu albo coś w tym rodzaju.