Position abhängig von dynamischer Breite des Elternelements

[siGGi]

Hi Leute,

ich möchte ein aufklappbares Menü mit unbegrenzt vielen Untermenüs erstellen. Der JS Code ist soweit fertig, aber mit der Positionierung der Untermenüs habe ich noch Probleme. Das Menü befindet sich in einer Liste, um die Formatierung zu vereinfachen.

<ul>
  <li>
    Menü 1
    <ul>
      <li>
        Untermenü 1 von Menü 1
      </li>
      <li>
        Untermenü 2 von Menü 2
      </li>
    </ul>
  </li>
  ...
</ul>

Kann ich irgendwie (möglichst über CSS) die Position eines Untermenüs, abhängig von dem entsprechenden übergeordneten Menü, festlegen? Die Breite des übergeordneten Menüs ist variabel und abhängig von dem verwendeten Platz des Inhalts.
Ich wüsste, wie das ganze über JS funktioniert, aber CSS wäre da die elegantere Methode, um auch eventuelle Design-Veränderungen zu vereinfachen (keine Änderungen am JS-Code).

Wäre genial, wenn mir dafür jemand eine Lösung bereitstellen könnte.

[Cheatah]

Hi,

Kann ich irgendwie (möglichst über CSS) die Position eines Untermenüs, abhängig von dem entsprechenden übergeordneten Menü, festlegen?

schreibe den folgenden Satz solange ab (mit einem Stift auf Papier), bis Du ihn verstanden und verinnerlicht hast:

Die absolute Positionierung richtet sich nach dem innersten Vorfahren-Element, welches eine von 'static' verschiedene position-Angabe besitzt, bei Nichtvorhandensein eines solchen nach dem Viewport.

Cheatah

[siGGi]

Die absolute Positionierung richtet sich nach dem innersten Vorfahren-Element, welches eine von 'static' verschiedene position-Angabe besitzt, bei Nichtvorhandensein eines solchen nach dem Viewport.

Das Menü soll aufgeklappt wie folgt aussehen:

------- ------------
|Menü1| |Untermenü1|
------- ------------ --------------
        |Untermenü2| |Untermenü2.1|
        ------------ --------------
        |Untermenü3|
        ------------

Dabei haben die verschiedenen Menüs unterschiedliche Breiten. Wie soll ich das denn mit CSS realisieren? Ich seh nicht wie das gehen soll!

[wahsaga]

hi,

---

|Menü1| |Untermenü1|

---

|Untermenü2| |Untermenü2.1|
        ------------ --------------
        |Untermenü3|
        ------------

Dabei haben die verschiedenen Menüs unterschiedliche Breiten.

Für die erste Untermenü-Ebene in diesem Beispiel trifft das erst mal nicht zu.
Kann da von einer festen Breite ausgegangen werden?

gruß,
wahsaga

[siGGi]

Kann da von einer festen Breite ausgegangen werden?

Nach Möglichkeit nicht. Mit fester Breite funktioniert es jetzt soweit.
Der Code:

div#menu li {
    display: block;
    white-space: nowrap;
    position: relative;
    top: -1px;
}

div#menu ul {
    position: absolute;
    list-style-type: none;
    display: inline;
    list-style-position: outside;
    border: solid 1px #aaa;
}

Das Problem ist aber, dass sich die Position des Untermenüs nach der Breite des Inhalts des LI-tags richtet und nicht nach der Gesamtbreite des ULs. Wenn also das 1. LI schmaler ist als das 2., überlappt das Untermenü vom 1. LI das 2. LI. (Ich hoffe das ist verständlich) Ich muss jetzt also irgendwie das Untermenü nicht nach dem Elternelement ausrichten, sondern nach dem Elternelement 2 Ebenen  über dem Ausgangs-LI. Aber wie geht das?

[wahsaga]

hi,

Das Problem ist aber, dass sich die Position des Untermenüs nach der Breite des Inhalts des LI-tags richtet und nicht nach der Gesamtbreite des ULs. Wenn also das 1. LI schmaler ist als das 2., überlappt das Untermenü vom 1. LI das 2. LI. (Ich hoffe das ist verständlich)

Also sollen _doch_ alle Untermenüs an _einer_ Position in der horizontalen ausgerichtet werden?

Ich muss jetzt also irgendwie das Untermenü nicht nach dem Elternelement ausrichten, sondern nach dem Elternelement 2 Ebenen  über dem Ausgangs-LI. Aber wie geht das?

Siehe Cheatahs Antwort.

gruß,
wahsaga