Matrix-Navigation mit DropDown - "Vererbung verhindern"?

Hallo zusammen,

ich sitze jetzt seit über zwei Tagen an einem Problem das mich verzweifeln lässt - aber mal von vorne:

Ich nutze die hier beschriebene Technik der „Matrix-Navigation“ (einer großen Datei mit allen Zustandsgrafiken der Navigation) um ein rein mit CSS formatiertes Menü zu erstellen: Navigation MatrixReloaded @ Dan Rubin’s SuperfluousBanter

Die Technik ist relativ leicht, je nach body-ID und hover-ID wird der Hintergrund verschoben um einen Hover-Effekt zu erzielen und um eine alternative Grafik für den gerade ausgewählten Bereich (also z.B. „Startseite“, „Galerie“, etc.) anzuzeigen damit dieser als ausgewählt angezeigt wird.

Soweit funktioniert das gut - HIER MEINE BISHERIGE NAVIGATION IN AKTION: CAPTION_LINE

Nun zu meinem Problem: Ich möchte dieser Navigation eine Dropdown-Funktionalität hinzufügen um weitere Unterpunkte zur Auswahl anzubieten.
Da die Navigation über eine ungeordnete Liste formatiert wird, wollte ich dem Ganzen eine weitere ungeordnete Liste hinzufügen (in der Form ul#nav li ul {weitere Anweisungen}).
Leider werden alle Informationen des „Mutter-UL/LI-Tags“ auch an die weiteren Unterpunkte vererbt - so findet sich hier vor allem ein „overflow:hidden“, welches verhindert das die gewünschte Dropdown-Liste über die Größe der Navigation heraus sichtbar ist und weitere Anweisungen in der LI-Formatierung die mir Kopfzerbrechen bereiten (und die Dropdown-Liste nicht erscheinen lassen).

Die relevanten CSS-Styles im Einsatz sind hier sichtbar: http://www.madpotato.de/test/_lang/de/style.css

Der HTML-Code (wie er mir vorschwebt) ist dieser:

  <ul id="nav">
    <li id="sta"><a href="'.$myDomain.LINK_1.'">'.LINK_1.'</a></li>
    
    
    <li id="gal">
      <a href="'.$myDomain.LINK_11.'"></a>
      <ul> 
        <li><a href="c">Test-Dropdown</a> <!-- MUSS SICHER ANDERS GEMACHT WERDEN -->
          <ul> 
            <li><a href="d">Punkt 1</a></li> 
            <li><a href="e">Punkt 2</a></li> 
            <li><a href="f">Punkt 3</a></li> 
            <li><a href="g">Punkt 4</a></li> 
          </ul> 
        </li> 
      </ul> 
    </li>
... etc. etc...

Hat jemand eine Lösung für meine blinden Augen wie ich entweder der beschriebenen Matrix-Navigation die Dropdown-Funktionalität hinzufügen kann bzw. eine Möglichkeit die Vererbung dieser Attribute zu verhindern (wohl nicht möglich). Oder hat jemand einen Link zu einer alternativen, reinen CSS-basierten Navigation mit grafischen Hover-Effekten und Dropdown-Funktionalität?

Vielen Dank im Vorraus, jede Form von Input kann mir den Tag etwas leichter machen ! :slight_smile:

Der HTML-Code sieht so ok aus, was die Vererbung im CSS angeht ein ganz einfaches Beispiel:

li { margin-left: 20px; }Ein li innerhalb dieses li kann hierüber einen anderen Außenabstand nach links erhalten:

li li { margin-left: 10px; }

Danke für Deine Hilfe… leider ist es in diesem Fall irgendwie nicht so einfach da die Eigenschaften sich gegenseitig behindern und nicht so einfach überschreiben lassen… (ich hätte selber nicht gedacht das ich so eine eigentlich einfache Aufgabe nicht hinbekomme)

Nochmal konkret:
Die „Hauptnavigation“ hat folgende Formatierung „nav#ul“ für Liste und „nav#ul li“ für die horizontalen Unterpunkte. Die Dropdown-Liste soll als untergeordnete Liste dieser Tags (also „nav#ul li ul“ und „nav#ul li ul li“) eingebaut werden. Alle Änderungen die ich dann für diese beiden Formatierungen eingebe werden aber leider NICHT übernommen (wenn ich die Anweisungen von nav#ul und nav#ul li temporär entferne funktioniert das Dropdown-Menü).

Vielleicht habe ich auch nur einen Denkfehler und es gibt eine einfache Lösung?! (das wär’ was :slight_smile: )

  • Hier ist die Variante mit eingebauten DropDown-Menü die nicht funktioniert: CAPTION_LINE
  • Und hier noch eine Variante mit deaktivierten Einstellungen des nav#ul li a-Tags: CAPTION_LINE (wie man sehen kann funktioniert das DropDown-Menü - leider ist es durch den overflow:hidden nur innerhalb der Navigation sichtbar - und natürlich funktioniert das eigentliche Menü nicht mehr)

Die jeweils relevanten Style-Informationen sind hier

Du meinst wohl eher ul#nav und nicht nav#ul ?! :grin:

Ich denke dein Problem hängt mit der ID „nav“ zusammen. Da diese für

ul#nav

gewisse CSS-Eigenschaften vorsieht hat diese auch für untergeordnete Elemente die höhere Bedeutung. Wenn du nun diese Eigenschaften z.B. für nav#ul li ul ändern willst müsstest du auf !important zurückgreifen. Beispiel:

ul#nav li ul { margin-left: 20px !important; }

Sowas sollte man eigentlich vermeiden, besser wäre es wenn du auf diese ID „nav“ verzichtest und eine Klasse einsetzt.