Navigation mit css und ul fehlerhaft.

[biomatrix]

Mit CSS wollte ich eine Navigation erstellen. Code:

ul#navigation li {
 list-style-image:url(../images/tab.jpg);
}
ul#navigation li ul {
 list-style-image:url(../images/pin.png);
 margin-left: -2px;
}
ul#navigation li ul li {
    list-style-image:url(../images/pin.png);
 background-color: #8C8C8C;
 margin-left: -2px;
}

Aber die Letzten beiden Regeln (ul#navigation li ul und ul#navigation li ul li) werden vom Browser einfach ignoriert. Wieso?

[Cheatah]

Hi,

Aber die Letzten beiden Regeln (ul#navigation li ul und ul#navigation li ul li) werden vom Browser einfach ignoriert. Wieso?

es gibt zig Gründe dafür - einschließlich Deiner Interpretation der Sachlage. Genau lässt sich das nur durch eine Analyse des Realsystems sagen.

Cheatah

[biomatrix]

Hi,

Aber die Letzten beiden Regeln (ul#navigation li ul und ul#navigation li ul li) werden vom Browser einfach ignoriert. Wieso?

es gibt zig Gründe dafür - einschließlich Deiner Interpretation der Sachlage. Genau lässt sich das nur durch eine Analyse des Realsystems sagen.

Cheatah

navigation.php:
<ul id="navigation">
  <li>Home</li>
    <ul>
      <li>The Joke</li>
      <li>Spiderschwein</li>
    </ul>
  <li>About</li>
  <li>Seiten</li>
    <ul>
      <li>Orbs.de.vu</li>
      <li>DavisGames.de.vu</li>
      <li>Picloader.de.vu</li>
      <li>Gaylord-suche.de.vu</li>
    </ul>
  <li>Stuff</li>
    <ul>
      <li>Kostenlose SMS</li>
      <li>Bilderbrowser</li>
      <li>Längste Seite</li>
      <li>Videos@</li>
      <li>3d@</li>
      <li>&quot;Virus&quot;</li>
      <li>&quot;B&ouml;se&quot;</li>
      <li>Online TV</li>
      <li>Wallpapers</li>
    </ul>
</ul>

[Gunnar Bittersmann]

@@biomatrix:

<ul id="navigation">
  <li>Home</li>
    <ul>
      <li>The Joke</li>
      <li>Spiderschwein</li>
    </ul>
  <li>About</li>

Aber die Letzten beiden Regeln (ul#navigation li ul und ul#navigation li ul li) werden vom Browser einfach ignoriert. Wieso?

Weil deine 'ul'-Elemente nicht Kinder von 'li', sondern von 'ul#navigation' sind.

Was sie nicht sein dürfen. Das hättest du mit dem Validator schon selbst herausgefunden haben sollen.

Richtige Verschachtelung:

<ul id="navigation">  
  <li>Home  
    <ul>  
      <li>The Joke</li>  
      <li>Spiderschwein</li>  
    </ul>  
  </li>  
  <li>About</li>

Live long and prosper,
Gunnar