Keine Wirkung von z-index auf ul/li

[j4nk3y]

Servus zusammen!

Ein Satz vorweg: Boah... CSS ist so *! Nicht ernst nehmen, ich wollte es einfach nur einmal gesagt haben.

Da ich das mit dem Stapelkontext mittlerweile verstanden hab, und die große Schwäche von CSS mir immer wieder ein strich durch die Rechnung macht.

Folgendes Szenario. Es gibt eine Navigation der folgenden Art:

<nav>
  <ul>
    <li>
      <ul>
        <li>
          <ul>
            <li></li>
            ....
            <li></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <ul>
        <li>
          <ul>
            <li></li>
            ....
            <li></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <ul>
        <li>
          <ul>
            <li></li>
            ....
            <li></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Folgendes nicht lösbares Problem (rein mit CSS).

Da der innere Stapelkontext nicht vom äußeren abhängt, lassen sich innere Elemente hinter einander verstecken. Zum Beispiel, alle Listitems in der obersten Unorderedlist oder alle Listitems in der mittleren/tiefsten Unorderedlist. Letzteres nur, wenn das übergeordnete Listitem keinen z-index besitzt. Was natürlich nicht schlimm wär wenn man nur 2 ebenen hat. Also lassen sich die ersten Listitems nicht unter den 'tieferen' (bezogen auf die Markup struktur) liegenden Listitems verstecken.

Ich sage ja gar nicht das der Stapelkontext schlecht ist. Aber das dieser gar nicht mehr funktioniert wenn das Eltern Element schon ein z-index hat, ist schlichtweg schwach.

Weiterhin gibt es natürlich auch kein Selector um Parents Siblings bei hover/focus/sonstiges anzusprechen, was auch ein ausblenden übergeordneter Elemente, rein per CSS, nicht Möglich macht.

Naja... Ich bleibe dabei... CSS ist einfach fürn *. Also versuch ich das jetzt 'umständlich' (weil es einfacher gehen könnte) mit jQuery zu realisieren.

Startschuß! (übersehe ich etwa etwas?)

Gruß
Jo