Menü klappt nicht ein

[buffy2511]

Hallo zusammen,

ich wollte mal mit einer ausklappbaren Unternavigation arbeiten. Das ist so auch ganz prima.

Wie gewollt erscheint die Unternavigation, wenn man mit der Maus über den Link fährt. Nur - sie bleibt da dann auch, bis man entweder einen LInk der Unternavigation anklickt oder über einen anderen Hauptnavigationspunkt fährt. Und da beginnt das Spielchen dann wieder von vorne...

Hier ein Auszug des Codes:

Aus der CSS-Datei:

#sub1 {
	visibility:hidden; 
	margin-left:0px; 
	position:absolute; 
	top:225px !important;  /*moderne Browser*/
	top:232px; /* IE */
}

Aus dem Navi-Template:

<script type="text/javascript">
  
  var subs=new Array('sub1','sub2','sub3','sub4','sub5','sub6');
    
  function hideall(){
    for(x=0; x<subs.length;x++){
      document.getElementById(subs[x]).style.visibility='hidden';
    }
  }
    
  function display(mode,ele){
    if(mode=='s'){
      hideall();
      document.getElementById(ele).style.visibility='visible';
    }else{
      document.getElementById(ele).style.visibility='hidden';
    }
  }
  </script>

<!-- navi -->
<div id="navi">
<div>
  <table border="0" cellspacing="0"cellpadding="0">
    <tr>
      <td width="119" height="21" onMouseOver="display('s','sub1')" style="border-right: 1px solid white; color: white; padding-left: 10px;">Startseite</td>
      <td width="119" height="21" onMouseOver="display('s','sub2')" style="border-right: 1px solid white; color: white; padding-left: 10px;">Ferienwohnung</td>
      <td width="119" height="21" onMouseOver="display('s','sub3')" style="border-right: 1px solid white; color: white; padding-left: 10px;">Umgebung</td>
      <td width="119" height="21" onMouseOver="display('s','sub4')" style="border-right: 1px solid white; color: white; padding-left: 10px;">F&uuml;r Hundefreunde</td>
      <td width="119" height="21" onMouseOver="display('s','sub5')" style="border-right: 1px solid white; color: white; padding-left: 10px;">Preise</td>
	  <td width="120" height="21" onMouseOver="display('s','sub6')" style="color: white; padding-left: 10px;">Kontakt</td>
    </tr>
  </table>
</div>
</div>
<!-- ende navi -->

<!-- subnavi 1 -->
<div id="sub1" onClick="display('h','sub1')">
  <table border="0"  cellspacing="0"cellpadding="0">
    <tr><td class="navi"><a href="index.php" class="navi">Home</a></td>
    </tr>
    <tr><td class="navi"><a href="links.php" class="navi">Links</a></td>
    </tr>
  </table>
</div>

Nach unten geht es dann mit Subnavi 2 - 6 weiter.

Was muss ich denn noch einfügen? Sobald ich mit onMouseOut arbeite, kriege ich die Subnavi gar nicht erst zu sehen.

Vielen Dank schon mal.

LG Nadine

[buffy2511]

Hat sich jetzt direkt erledigt. Ich habe anstatt onClick einfach onMouseOver genommen und dann noch onMouseOut="hideall()" hinzugefügt. So einfach kann's gehen... ;-)