Über CSS untergeordnete <ul>-Liste ausschließen

[Enrico]

Hallo,

ich habe folgende Menüstruktur:

<div id='cssmenu'>
   <ul>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>Band</a></li>
      <li><a href='#'>Live</a></li>
      <li><a href='#'>Multimedia</a>
         <ul>
            <li><a href='#'>Fotos</a></li>
            <li><a href='#'>Songs</a></li>
            <li><a href='#'>Alben</a></li>
            <li><a href='#'>Videos</a></li>
            <li><a href='#'>Interviews</a></li>
         </ul>
      </li>
      <li><a href='#'>Community</a>
         <ul>
            <li><a href='#'>Rezensionen</a></li>
            <li><a href='#'>Gästebuch</a></li>
            <li><a href='#'>Newsletter</a></li>
            <li><a href='#'>Links</a></li>
            <li><a href='#'>B.I.T.S. & Friends</a></li>
            <li><a href='#'>Artefakte</a></li>
         </ul>
      </li>
      <li><a href='#'>Kontakt</a></li>
   </ul>
</div>

Die <li>-Elemente richte ich mittels folgendem css-Code aus:

#cssmenu li:first-child,
#cssmenu li:last-child
{
   padding: 0
}

#cssmenu li:nth-child(n+2):nth-child(-n+6)
{
   padding: 0 0 0 0.3em
}

Das erste <li>-Element ""Home" hat keine Abstände, das zweite ("Band") bis vorletzte ("Community") <li>-Element ("li:nth-child(n+2):nth-child(-n+6)") jeweils einen linken Abstand.

Leider wirken sich diese Abstandsangaben aber auch auf die beiden Untermenüs aus.

Wie kann ich dies verhindern? Mit dem ":not()"-Selektor habe ich schon rum experimentiert, aber leider mit dem Resultat, dass dann auch die Abstände der Hauptmenüpunkte weg fallen.

Danke schon mal für eure Hilfe und Gruß Enrico

[Linuchs]

Hallo Enrico,

ist das nur bei mir so? Deine Struktur wird als Fleißsatz-Soße ausgeliefert. Erst im Antwort-Formular gibt es Zeilenumbrüche.

Das C in CSS steht für Cascading, also Regeln nach unten weiterreichen.

Du musst dann für "unten" neue Regeln bestimmen:

ul li {
  background-color: #ff0; /* Listenpositionen Ebene 1 */
}
ul ul li {
  background-color: #0ff; /* Listenpositionen Ebene 2 */
}

Linuchs

[robertroth]

Liebe Mitdenker, liebe Wissende, liebe Neugierige,

ist das nur bei mir so? Deine Struktur wird als Fleißsatz-Soße ausgeliefert. Erst im Antwort-Formular gibt es Zeilenumbrüche.

Das Problem hatte ich auch mit dem Archiv.

Dedlfix hat dann gemeint, es läge am Whitespace per CSS, das war dann wohl auch so. Mein alter FF hatte damit noch Probleme. Neuen installiert (ich muss da immer erst fragen, ob ich darf...) und schon ging es wieder.

Welchen Browser hast Du denn noch laufen?

Spirituelle Grüße
Euer Robert
[e-mail]

[Linuchs]

Welchen Browser hast Du denn noch laufen?

nur noch Opera 12.15, nachdem mir der Firefox beim Update abhanden kam.

Ich sollte diese Scheiss-Updates lassen. Irgendwas ist immer faul. Davor davor (vorletzte Version) hat das Drucken nicht richtig funktioniert.

Gruß, Linuchs

[tk]

Hallo Enrico,

ich habe folgende Menüstruktur:

warum nicht <nav> statt <div id='cssmenu'>?

Leider wirken sich diese Abstandsangaben aber auch auf die beiden Untermenüs aus.

Wie kann ich dies verhindern?

Mit dem Kindselektor dafür sorgen dass die Einstellungen nur für die <li>s der obersten Ebene gelten, also so: nav>ul>li { … }

Gruß,
Tobias

[Enrico]

Hallo Tobias,

warum nicht <nav> statt <div id='cssmenu'>?

Habe ich geändert, ich stehe ja gerade erst am Anfang meiner (möglichen) HTML5-Karriere :-)

Mit dem [Kindselektor] ... nav>ul>li {…}

Perfekt, das war's!! :-)

Vielen lieben Dank für die rasche Hilfe an Dich & Linuchs!

Gruß, Enrico

[Gunnar Bittersmann]

@@Enrico

warum nicht <nav> statt <div id='cssmenu'>?

Eine ID stünde dem nav-Element trotzdem gut; es könnte ja mehrere davon geben.

Aber nicht "cssmenu"; mit CSS hat das Menü nichts zu tun.

Mit dem [Kindselektor] ... nav>ul>li {…} Vielen lieben Dank für die rasche Hilfe an Dich & Linuchs!

Linuchs hat zu danken. Dafür, dass tk gezeigt hat, dass es sinnvoller (und einfacher) ist, ungeliebte Angaben nicht mühsam zu überschreiben, sondern gar nicht erst zu tätigen.

LLAP

[quincunx]

Hallo Enrico,

schau dir das auf CodePen einmal an.

#cssmenu > ul > li:nth-child(n+2) {padding: 0 0 0 2em;background-color:cornflowerblue }
#cssmenu > ul > li:first-child,
#cssmenu > ul > li:last-child {padding: 0;background-color:pink }

Die Hintergrundfarbe ist nur zur Hilfe gedacht.

mfg qx