Definition verschachtelter UL's

[PetahGeh]

hallihallo,
ich baue gerade ein CSS-Menu mit verschachtelten UL's. Mein Problem ist wahrscheinlich, dass ich mit Vererbung und Verschachtelung in CSS nicht so firm bin.

Der Code sieh wie folgt aus:
<div id="menu">
<ul>
  <li><a href="#" id="ob_1">Oberpunkt 1</a>
    <ul>
      <li><a href="#">Unterpunkt 1.1</a></li>
....
    </ul>
  </li>
</ul>
<ul>
  <li><a href="#" id="ob_2">Oberpunkt 2</a>
    <ul>
      <li><a href="#">Unterpunkt 2.1</a></li>
....
    </ul>
</ul>
</div>

Wie bringe ich jetzt dem Menu bei, dass Unterpunkt 1 anders aussieht als Unterpunkt 2?

vielen dank für die Hilfe schonmal, peter

[D.R.]

Hallo,

ich baue gerade ein CSS-Menu mit verschachtelten UL's. Mein Problem ist wahrscheinlich, dass ich mit Vererbung und Verschachtelung in CSS nicht so firm bin.

Der Code sieh wie folgt aus:
<div id="menu">

Kannst du weglassen und statt dessen <ul> formatieren. (Evtl. ID zuweisen)

<ul>
  <li><a href="#" id="ob_1">Oberpunkt 1</a>
    <ul>
      <li><a href="#">Unterpunkt 1.1</a></li>
....
    </ul>
  </li>
</ul>
<ul>
  <li><a href="#" id="ob_2">Oberpunkt 2</a>
    <ul>
      <li><a href="#">Unterpunkt 2.1</a></li>
....
    </ul>
</ul>
</div>

Wie bringe ich jetzt dem Menu bei, dass Unterpunkt 1 anders aussieht als Unterpunkt 2?

Weise ihm eine Klasse zu und formatiere ihn mit CSS.

mfg. Daniel

[afra]

Hallo Daniel!

Wie bringe ich jetzt dem Menu bei, dass Unterpunkt 1 anders aussieht als Unterpunkt 2?

Weise ihm eine Klasse zu und formatiere ihn mit CSS.

Eine, aber eine den Code aufblähende Möglichkeit. Versuche lieber über die Hirarchie des Dokumentes an Deine Elemente zu formatieren.

#id li ul li {
 /* Definitionen */
}

Schönen Gruß

Afra

[D.R.]

Hallo,

Wie bringe ich jetzt dem Menu bei, dass Unterpunkt 1 anders aussieht als Unterpunkt 2?

Weise ihm eine Klasse zu und formatiere ihn mit CSS.

Eine, aber eine den Code aufblähende Möglichkeit. Versuche lieber über die Hirarchie des Dokumentes an Deine Elemente zu formatieren.

#id li ul li {
/* Definitionen */
}

Wenn ich das richtig verstanden habe, sieht der Code aber (vereinfacht) so aus:

  
<ul>  
 <li>  
  <Navi1 />  
 </li>  
 <li>  
  <navi2 />  
 </li>  
</ul>  

Zwar könnte man hier mit...

  
ul li:first-child {format. f. Navi 1}  
ul li {format. f. Navi 2}  

...arbeiten, nur gibt es da wieder Irgend Einen[1] Browser, der damit nicht klarkommt.

[1] bekannter unter der abk. „IE“

mfg. Daniel

[afra]

Hallo!

Wenn ich das richtig verstanden habe, sieht der Code aber (vereinfacht) so aus:

Dies ist ein Forum. Hier liest man, hier muss man nichts verstehen ;o) Und nein, der OP hatte folgenden Code gepostet:

<ul>
  <li><a href="#" id="ob_1">Oberpunkt 1</a>
    <ul>
      <li><a href="#">Unterpunkt 1.1</a></li>
....
    </ul>
  </li>
</ul>

Schönen Gruß

Afra

[D.R.]

Hallo,

Wenn ich das richtig verstanden habe, sieht der Code aber (vereinfacht) so aus:

Dies ist ein Forum. Hier liest man, hier muss man nichts verstehen ;o)

Ah, wusste ich nicht ;-)

Und nein, der OP hatte folgenden Code gepostet:

<ul>
  <li><a href="#" id="ob_1">Oberpunkt 1</a>
    <ul>
      <li><a href="#">Unterpunkt 1.1</a></li>
....
    </ul>
  </li>
</ul>

Ja, und in der <ul> darunter befand sich Unterpunkt 2.x. Und _der_ sollte doch anders aussehen oder?

IMHO könnte der OP aber auch mal was dazu sagen.

mfg. Daniel