TMENU funktioniert nicht richtig

Hallo Forum,

ich bastle seit ein paar Tagen mit TYPO3 an einer Seite, im Großen und Ganzen funktioniert auch alles, nur mit dem Menü hab ich Probleme. Es soll wie folgt aussehn, die Hauptmenüpunkte bestehen aus einer gif Datei, einem Farbverlauf und Text (alles im CSS). Die Untermenüpunkte sollen einfach nur Text sein, ohne Bild, RollOver oder sonstigen Effekten.
Das Hauptmenü steht und funktioniert auch, aber die Unterpunkte sehen aus wie die Hauptkunkte nur in kleiner.
Ich hoffe ihr versteht was ich meine ;-)

Hier meine Codes für das Menü:

 MENU_LINKS = HMENU
    MENU_LINKS.special = directory
    MENU_LINKS.special.value = 81
  
  
  MENU_LINKS{
1 = TMENU
  1.wrap = <ul class="avmenu">|</ul>
  1{
    NO{
      wrapItemAndSub = <li>|</li>
    }
  }
  
 2 = TMENU
  2.wrap = <ul class="avmenu2">|</ul>
  2{
    NO{
      wrapItemAndSub = <li>|</li>
    }
   
  }
 
  }

/* Left sidebar and menu*/
#leftside {clear:left; float:left; margin:0 0 10px; padding:0; width:150px;}
#leftside ul.avmenu {list-style:none; margin:0 0 18px; padding:0; width:150px;}
#leftside ul.avmenu li {display:inline; padding:0; width:150px;}
#leftside ul.avmenu li a {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; color:#505050; float:left; font-size:1em; font-weight:700; margin-bottom:5px; padding:5px 1px 5px 5px; text-decoration:none; width:138px;}
#leftside ul.avmenu li a:hover,#leftside ul.avmenu li a.current {background:url(img/menubg2.gif) repeat-x bottom left #eaeaea; border-bottom:1px solid #b0b0b0; border-left:4px solid #505050; border-right:1px solid #b0b0b0; border-top:1px solid #b0b0b0; color:#505050;}


#leftside ul.avmenu2 li {display:inline; padding:0; width:100px;}
#leftside ul.avmenu2 li a {background:color:#ffffff; float:left; font-size:1em; font-weight:700; width:100px;}
#leftside ul.avmenu2 li a:hover,#leftside ul.avmenu2 li a.current {background:color:#ffffff;}



#leftside ul.avmenu ul {font-size:0.9em; margin:0 0 0 15px; padding:0 0 5px 0; width:133px;}
#leftside ul.avmenu ul a {padding:3px 1px 3px 5px; width:123px;}
#leftside ul.avmenu ul ul {font-size:1em; width:120px;}
#leftside ul.avmenu ul ul a {width:108px;}
#leftside h2 {font-size:1.5em; font-weight:400;}

So soll das Menü dann aussehen:
Bild: farm6.static.flickr.com/…/5683319233_49d9e90117.jpg

und so sieht es aus:
Bild: farm6.static.flickr.com/…/5683319313_db84c16fcf.jpg

P.S. ich muss gestehn dass ich auch schon anderweitig gefragt habe, aber da kamen überall keine Antworten.

Das liegt daran, dass beispielsweise die Regel

#leftside ul.avmenu li a

auch auf Anker angewandt wird, die sich in avmenu2 befinden. Nun gibt es zwei Möglichkeiten:
1. Du überschreibst in den CSS des zweiten Menüs jede Eigenschaft, die Du für das erste gesetzt hast.
Beispielsweise müsstest Du das Background-Bild wieder entfernen:

#leftside ul.avmenu2 li a {background-image:none ... }

Oder aber

2. Du schreibst die Regeln des ersten Menüs so um, dass Du den Child Selector verwendest:

#leftside ul.avmenu > li > a

Dank des > gilt diese Regel nicht mehr für das zweite Menü.

Super danke, hat funktioniert *freu*