[JS]Visible-hidden

Imam en problemček v javascriptu. Nisem preveč vešč JSja in skušam na najbolj enostaven način rešiti zadevo.

No ideja je ta. Imam vodoravni glavni meni (5 povezav). 4 od 5 povezav imajo podmenije. Te povezave se prikažejo vodoravno eno vrstico nižje, ko greš z miško čez glavno povezavo. (podobno kot navaden dropdown meni). Sedaj pa nočem, da se ta spodnji meni takoj skrije če greš z miško dol iz glavne povezave, ampak da ostane, dokler ne greš z miško na drugi meni v glavni navigaciji, takrat se prikaže drugi podmeni.

Zadeva mi trenutno deluje tako da imam na začetku vse podmenije narejene na "hidden" in ko greš z miško na določen glavni meni se spodaj prikaže podmeni in tudi ostane. problem je pa da ko greš spet na drugi meni prvi ostani, torej pride do prekrivanja.

upam da sem napisal dovolj razumno, prilagam še pa kodo.
HTML

<div title="Navigation" id="navi">
<span id="home"><a href="news.php" class="navi_link">Domov</a></span>
<span id="translate" onmouseover="javascript:visible('navi_p')" ><a href="news.php" class="navi_link">Prevajanja</a></span>
<span id="seminars" onmouseover="javascript:visible('navi_t')"><a href="news.php" class="navi_link">Tečaji in seminarji</a></span>
<span id="other" onmouseover="javascript:visible('navi_o')"><a href="news.php" class="navi_link">Ostale storitve</a></span>
<span id="about"><a href="news.php" class="navi_link">O podjetju</a></span>
</div>
<div id="navi2">
<div id="navi_p" style="visibility:hidden; position:absolute">Pisno prevajanje <strong>|</strong> Brezplačno prevajanje <strong>|</strong> Sodno overjeni prevodi <strong>|</strong> Cenik <strong>| </strong>Zagotavljanje kakovosti <strong>|</strong> Informativni izračun <strong>|</strong> Spletno naročilo</div>
<div id="navi_t" style="visibility:hidden;  position:absolute">Tečaji <strong>|</strong> Seminarji <strong>|</strong> Sodno overjeni prevodi <strong>|</strong> Cenik <strong>| </strong>Zagotavljanje kakovosti <strong>|</strong> Informativni izračun <strong>|</strong> Spletno naročilo</div>
<div id="navi_o" style="visibility:hidden; position:absolute">Ostalo</div>
</div>
</div>

Javascript

function visible(id){ 

var obj= document.getElementById(id)

obj.style.visibility='visible';
}

edit:
zadevo zdaj nekako realiziral ampak me samo zanima če je to pravilno oz. če je kakšna boljša rešitev

function visible(id){ 

var obj= document.getElementById(id)
var link_o = document.getElementById("navi_o");
var link_p = document.getElementById("navi_p");
var link_t = document.getElementById("navi_t");
if(obj==link_p){
	link_o.style.visibility='hidden';
	link_t.style.visibility='hidden';
}else if(obj==link_o){
	link_p.style.visibility='hidden';
	link_t.style.visibility='hidden';
}else if(obj==link_t){
		link_p.style.visibility='hidden';
	link_o.style.visibility='hidden'; 
}
	obj.style.visibility='visible';
}