Dynamisches Menü mit 3 Ebenen

Hallo.

Ich habe auf meiner Seite ein dynamisches Menü mit 3 Ebenen erstellt und noch ein Problem entweder im Typoscript oder im CSS.

Die 3. Ebene im Menü soll eigentlich etwas eingerückt werden, jedoch wird sie wie die 2. Ebene angezeigt.

Die Basis des Templates beruht auf dem Multiflex3 von Rasi.ch

Hier mal das TS:

temp.MenuLinks = HMENU
temp.MenuLinks {
        special = directory
        special.value = 1
        #excludeUidList = 12, 13, 14, 15
        wrap = <dl class="{$nav3_class}">|</dl>
                {
 1 = TMENU
 1 {
  expAll = 0
  noBlur = 1
  
  wrap = |
  
  NO = 1
  NO {
    linkWrap = <dt>|</dt>
    ATagParams = class="level1-no"
    ATagTitle.field = description // title
     }
 
   ACT <.NO 
   ACT {
    ATagParams = class="level1-act"
     }
  
  ACTIFSUB <.ACT
 
  CUR <.ACT
  CUR {
   doNotLinkIt = 0
   ATagParams = class="level1-no"
     }
  }
  
 
 2 <.1
 2 {
  NO {
    linkWrap = <dd>|</dd>
    ATagParams = class="level2-no"
    ATagTitle.field = description // title
      }
 
  ACT <.NO
  
  CUR <.NO
  CUR {
   doNotLinkIt = 0
   ATagParams = class="level2-no"
  }
 }
 3 <.2
 3 {
  NO {
    linkWrap = <dd>|</dd>
    ATagParams = class="level3-act"
    ATagTitle.field = description // title
      }
	  }
}

}

Das erstellt dann folgendes Menü:
Bild: server.sywatec.de/…/ebenen.jpg

Die 3. Ebene sollte eigentlich etwas eingerückt erscheinen.
Tut sie aber nicht.

Hier das css dazu:

.nav3-bullet {
width:170px; 
margin:10px 0 0 20px;
}
.nav3-bullet dt a, 
.nav3-bullet dt a:visited {
line-height:2.0em; 
padding:0 0 0 10px; 
background:url(../img/bg_bullet_full_1.gif) no-repeat 0px 50%; 
text-decoration:none; 
color:rgb(70,122,167); 
font-weight:bold; 
font-size:120%;
}
.nav3-bullet dd a, 
.nav3-bullet dd a:visited {
line-height:1.7em; 
margin:0 0 0 15px; 
padding:0 0 0 10px; 
background:url(../img/bg_bullet_half_1.gif) no-repeat 0px 50%; 
text-decoration:none; 
color:rgb(70,122,167); 
font-weight:normal; 
font-size:120%;
}
.nav3-bullet dt a:hover {
background:url(../img/bg_bullet_full_2.gif) no-repeat 0px 50%; 
text-decoration:underline; 
color:rgb(42,90,138-);
}
.nav3-bullet dd a:hover {
background:url(../img/bg_bullet_half_2.gif) no-repeat 0px 50%; 
text-decoration:underline; 
color:rgb(42,90,138-);
}

Kann mir jemand dabei weiterhelfen?
Danke

Also ich bin nicht der Blicker von CSS, deswegen vielleicht auch dumm gefragt, wo ist denn bitte das CSS für die dritte Menüebene? Ich habs nicht gefunden!

Daniel

Da bin ich mir selbst nicht so sicher 😉

Die CSS die ich gepostet habe definiert das

wrap = <dl class="{$nav3_class}">|</dl>

Die class="levelX-act" und class="levelX-no" definition habe ich im CSS nicht gefunden und auch wenn ich sie definiere, geht es nicht

Also wie gesagt, hab ich nicht die Ahnung von CSS, aber ich denke mal du solltest sowas in deine CSS-Datei einfügen:

.nav3-bullet dd dd a, 
.nav3-bullet dd dd a:visited {
line-height:1.7em; 
margin:0 0 0 30px; 
padding:0 0 0 10px; 
background:url(../img/bg_bullet_half_1.gif) no-repeat 0px 50%; 
text-decoration:none; 
color:rgb(70,122,167); 
font-weight:normal; 
font-size:120%;
}

.nav3-bullet dd dd a:hover {
background:url(../img/bg_bullet_half_2.gif) no-repeat 0px 50%; 
text-decoration:underline; 
color:rgb(42,90,138-);
}

Edit:
Habe jetzt mal nachgeschaut was dt und dd überhaupt macht, imo ist das für ein Menü nicht wirklich die beste Lösung. An deiner Stelle würde ich um steigen auf ul und li.

Daniel