Remo: CSS / JavaScript: Eigenes Navigationsmenu

Beitrag lesen

SELF-Forum

CSS / JavaScript: Eigenes Navigationsmenu

Remo
– Informationen zu den Bewertungsregeln

Ich bin daran, ein Navigationsmenu mit CSS und 2 kleinen JavaScript Funktionen zu konstruieren. Es funktioniert nicht schlecht bis jetzt, aber ein Problem gibt es, für welches ich hier nun eine Lösung suche.

Ein Menu-Eintrag besteht aus 2 Ebenen, einem Haupteintrag und einem Untermenu, dass erst beim onMouseover des Hauptmenupunktes angezeigt wird.

  
<a class="nav-item" href="" onMouseover="javascript:show('gallery');" >  
   <img border="0" src="images/orange_block.gif" width="11" height="11">  
   Bilder  
</a>  
<div class="sub-nav-item" id="gallery" onMouseout="javascript:hide('gallery');">  
   <a href="?nav=15">USA 04/05</a><br>  
   <a href="?nav=16">Test</a>  
</div>

Die beiden benutzten JS-Funktionen sind wie folgt definiert:

  
function show (id) {  
   if(document.getElementById){  
     document.getElementById(id).style.visibility = "visible";  
     document.getElementById(id).style.display = "block";  
   }  
}  
  
function hide (id) {  
   if(document.getElementById){  
     document.getElementById(id).style.visibility = "hidden";  
     document.getElementById(id).style.display = "none";  
   }  
}

Das Problem ist nun folgendes: Das Untermenu enthält mehrere Links. Sobald ich aber mit dem Cursor einen Link verlasse, verschwindet das Untermenu. Das verstehe ich nicht. Eigentlich wäre meine Absicht, dass das Menu nur verschwindet, wenn ich den div-Bereich verlasse. Wo liegt mein Überlegungsfehler?

Das ganze kann man sich hier (http://www.n.ethz.ch/student/martire/test) anschauen.

Die relevante Definition des .sub-nav-item sieht übrigens so aus:

  
.sub-nav-item{  
    position: relative;  
    top: 0px;  
    left: 15px;  
    background-color: #999966;  
    height: 100px;  
    width: 100px;  
    font-size: 10px;  
    display: none;  
}

Danke für Hinweise!

Beitrag melden
–
Informationen zu den Bewertungsregeln