z-index bzw. negative Verschiebung in verschachtelt. UL möglich?

[Frangoo]

Hallo,

ich möchte ein Menü mit einer verschachtelten UL erstellen - damit es sauberer Code wird (auch für Suchmaschinen).

Sprich: Navigation Level 1 in einem UL, jeder tiefere Unterpunkt in einem weiteren UL, der in ein LI eingebettet ist.

  
<ul>  
 <li>  
  <a href="#">Link1</a>  
   <ul>  
    <li>  
     <a href="#">Unterpunkt Link1</a>  
    </li>  
   </ul>  
 </li>  
</ul>  

Soweit so schön - nur möchte ich die innere UL optisch um ein paar Pixel unter die obere UL schieben, aber ich habe bisher keine Möglichkeit gefunden, das zu realisieren.
z-index funktioniert ja nur mit absoluten Elementen, aber dann springen alle Elemente ja komplett aus der "Verankerung" und dann müsste ich mit festen Positionsangaben und Größen arbeiten - was ich nicht habe, es soll alles flexiibel sein.
Verschiebungen mit negativen Margins haben auch bei mir nicht funktioniert :-(

Aber bevor ich es ganz aufgebe, wollte ich hier nochmal fragen - vielleicht hat von euch damit schon einmal was gemacht und es doch hinbekommen?

Merci für eure Tipps und Mitdenken,

Frangoo

[Tunnel 85]

<ul>
<li>
  <a href="#">Link1</a>
   <ul>
    <li>
     <a href="#">Unterpunkt Link1</a>
    </li>
   </ul>
</li>
</ul>

Also wenn ich das so sehe, dann packst du in ein list-element <li> zwei Sachen, einmal einen link und gleichzeitig noch eine neue Liste. Wenn mich nicht alles irrt, müsstest Du erst den ersten Punkt schliessen, und dann mit nem neuen <li> einen neuen Punkt öffnen in den du die untergeordnete liste <ul> packst.

  
<ul>  
<li><a href="#">Link1</a></li>  
<li><ul>  
<li>Liste Zwei</li>  
</ul></li>  
</ul>  

Das war erstmal das was mit jetzt sofort aufgefallen ist, deine eigentliche Frage verstehe ich vom Sinn her nicht so ganz, bitte erkläre es nochmal genauer, vieleicht mit ner kleinen Grafik.

Gruß
Tunnel

[suit_]

Wenn mich nicht alles irrt, müsstest Du erst den ersten Punkt schliessen, und dann mit nem neuen <li> einen neuen Punkt öffnen in den du die untergeordnete liste <ul> packst.

doch du irrst, das markup ist in ordnung

Das war erstmal das was mit jetzt sofort aufgefallen ist, deine eigentliche Frage verstehe ich vom Sinn her nicht so ganz, bitte erkläre es nochmal genauer, vieleicht mit ner kleinen Grafik.

die frage hingegen verstehe ich auch nicht

[Frangoo]

die frage hingegen verstehe ich auch nicht

OK, sorry war zu kurz erklärt von mir.

Ich habe eine horizontale Hauptnavigation:

Punkt 1 | Punkt 2 | Punkt 3

Unter jedem Punkt klappt dann beim Mouseover eine vertikale Unternavigation aus:

Punkt 1 | Punkt 2 | Punkt 3

Punkt 1a
Punkt 1b
Punkt 1c

Diese Unternavigation beginnt nun natürlich an der Unterkante des Elternelements. Ich möchte aber, dass es sich ein paar Pixel UNTER die obere Navigation schiebt, da ich mit Schatteneffekten arbeite.
Und das ist das Problem - ich kann sie zwar verschieben, aber dann liegt sie immer ÜBER der oberen Navigation.

Ich hoffe das ist nun verständlicher :)

[suit]

Diese Unternavigation beginnt nun natürlich an der Unterkante des Elternelements. Ich möchte aber, dass es sich ein paar Pixel UNTER die obere Navigation schiebt, da ich mit Schatteneffekten arbeite.
Und das ist das Problem - ich kann sie zwar verschieben, aber dann liegt sie immer ÜBER der oberen Navigation.

der horizontale menupunkt wird durch das a-element erstellt, das komplette untermenü durch sein nachfolgendes geschwisterelement ul

ein nachfolgendes element ist per default immer ÜBER seinem vorfahrenelement und über seinen vorhergehenden geschwistern

das verhalten zwischen geschwistern lässt sich durch z-index beeinflussen

  
ul li a { z-index: 2; }  
ul li ul { z-index: 1; }  

vorraussetzung für z-index ist, dass die elemente positioniert sind (absolute, relative oder fixed)

[suit]

der horizontale menupunkt wird durch das a-element erstellt, das komplette untermenü durch sein nachfolgendes geschwisterelement ul

nachtrag: dein code ist natürlich unvorteilhaft eingerückt, hier zur leichteren verständnis anders eingerückt und das kind-ul-ohne umbrüche:

<ul>  
  <li>  
    <a href="#">Link1</a>  
    <ul><li><a href="#">Unterpunkt Link1</a></li></ul>  
  </li>  
</ul>

[Frangoo]

DANKE :-)

vorraussetzung für z-index ist, dass die elemente positioniert sind (absolute, relative oder fixed)

Du bist der Beste!!
Ich hatte immer gedacht, z-index darf nur auf absolut positionierte Elemente angewendet werde. Das war der Fehler.

Nun klappt es doch, bin hoch erfreut. :-)))