Johannes: Html Navigation mit Listen und CSS (Problem mit margin-top)

Beitrag lesen

hi,

hab mir eine html navigation mit Listen und JavaScript gebastelt:
-Menüpunkte untereinander
-bei klick auf menüpunkt öffnen sich andere untermenüpunkte unter dem main-menüpunkt und die anderen main-menüpunkte gehen(sollen) logischerweise sich nach unten verschieben.

Soweit so Gut
Jetzt habe ich die einzelnen buttons mit CSS-Stylesheets ausgerichtet (margin)...das klappt auch alles wunderbar so lang die Untermenüpunkte geschlossen sind.
Sobald ich jetzt auf ein Main-Menüpunkt klicke und sich die dazugehörigen untermenüpunkte drunter ausfahren...sind die anderen Mainmenüpunkte die unter dem geklickten mainmenüpunkt stehen total verschoben (zu weit unten / zu weit oben)

ich nehme an das das an dem margin-top liegt der sich ja immer an dem ElternObjekt richtet...und bei ausfahren der untermenüs ändert sich ja das elternObjekt

Kennt jemand das Problem ???
bin für jeden tipp dankbar

hier noch ein auszug aus meinem Quelltext wie ich das ganze aufgebaut habe:

<!-- Main-Menüpunkt
        ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<a href="untermenue.php" onclick="javascript:switchlayer('Stau1');
  return false;">
   <img src="D:\buttons\button_hellgrün_pfeil.gif"border="0"                style="margin-top:-78px;"
   id="roll3"
  onmouseover="rollover('roll3')"
  onmouseout="rollout('roll3')" >
     <div style="position:relative; top:-83px;  left:27px;">
              <span onmouseover="rollover('roll3')" onmouseout="rollout('roll3')" style="text-decoration:none; color:black; font-family:Verdana; font-size:11px;">Stau 1</span>
    </div></a> <br>

<!--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

<!--2 Untermenüpunkte----------------------------------------------------------------------------------------------------------------------------------------------------------------->
        <dl id="Stau1" style="display:none;">
        <a href="untermenue.php"><img src="D:\buttons\button_weiss.gif" border="0" style="margin-top:-80px; margin-left:-40px;"
          id="roll6"
          onmouseover="rollover('roll6')"
          onmouseout="rollout('roll6')">
            <div style="position:relative; top:-121px; left:-2px;">
                             <span onmouseover="rollover('roll6')" onmouseout="rollout('roll6')" style="text-decoration:none; color:black; font-family:Verdana; font-size:11px;">Staumeldung</span>
                   </div></a> <br>

<a href="untermenue.php"><img src="D:\buttons\button_weiss.gif" border="0" style="margin-top:-110px; margin-left:-40px;"
          id="roll7"
          onmouseover="rollover('roll7')"
          onmouseout="rollout('roll7')">
            <div style="position:relative; top:-159px; left:-2px;">
                             <span onmouseover="rollover('roll7')" onmouseout="rollout('roll7')" style="text-decoration:none; color:black; font-family:Verdana; font-size:11px;">Staumeldung</span>
                   </div></a> <br> </dl>
                            <!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

<!--2. Mainmenüpunkt (der sich beim öffnen der beiden oberen untermenüpunkte verschiebt (also nicht direkt unter den beiden untermenüs steht)------------------------------------------------------------->
        <a href="untermenue.php" onclick="javascript:switchlayer('Verkehrslage');
  return false;"><img src="D:\buttons\button_hellgrün_pfeil.gif" border="0" style="margin-top:-116px;"
   id="roll4"
  onmouseover="rollover('roll4')"
  onmouseout="rollout('roll4')" >
    <div style="position:relative; top:-121px; left:27px;">
              <span onmouseover="rollover('roll4')" onmouseout="rollout('roll4')" style="text-decoration:none; color:black; font-family:Verdana; font-size:11px;">Stau 2</span>
    </div></a> <br>
 <"------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------>

Kopiert euch den quelltext ambesten in ne Textdatei...kann ja kein mensch lesen so wie der hier drin steht...;)

Vielen Danke für jede bemühung!!!

Gruß
Johannes