Menu: Untermenupunkte nicht sichtbar

[Marc Nilius]

Hallo!

Mal wieder ein kleines Problem: Ich habe ein Menu (horizontal) mit mehreren Menupunkten als Liste implementiert, etwa so:

<div id="menu">
<ul>
  <li><a href="#">Punkt 1</a></li>
  <li><a href="#">Punkt 2</a></li>
  ...
</ul>
</div>

Soweit gar kein Problem. Nun moechte ich unter jeden dieser Menupunkte noch Untermenupunkte einfuegen, die allerdings erst eingeblendet werden, wenn man auf den Hauptmenupunkt klickt.
Das sieht dann so aus:

<div id="menu">
<ul>
  <li><a href="#" onclick="showsubmenu(1); return true;">Punkt1</a></li>
    <ul id="submenu1" class="submenu">
      <li>test1</li>
      <li>test1b</li>
    </ul>
  <li><a href="#" onclick="showsubmenu(2); return true;">Punkt2</a></li>
    <ul id="submenu2" class="submenu">
      <li>test2</li>
    </ul>
  ...
</ul>
</div>

Die kleine JS-Funktion greift sich halt immer das entsprechende Element via ID und setzt die Visibility auf "visible" bzw. wieder zurueck auf "hidden".

Das funktioniert alles soweit wunderbar. Problem: Wenn ein Untermenupunkt nicht dargestelt wird, wird trotzdem der Platz im Menu dafuer vorgehalten. Das ist ziemlich bloed. Ich haette gerne, dass erst wenn ein Untermenupunkt eingeblendet wird, der Platz verbraucht wird und damit alle weiteren dahinterstehenden Hauptmenupunkte einfach nach unten rutschen.

Wie kann ich das realisieren? Was muss ich aendern?

Vielen Dank schonmal und viele Gruesse,
Marc