[TYPO3-german] CSS-Dropdown in TS nachbauen

[Torsten]

Guten Morgen zusammen,

ich versuche gerade ein MegaDropdown in Typo3 einzubinden (Vorlage 
http://www.sohtanaka.com/web-design/examples/mega-dropdowns/ 
<http://www.sohtanaka.com/web-design/examples/mega-dropdowns/>), hänge 
aber an einer Stelle und das Thema brennt mir jetzt schon seit Tagen 
unter den Nägeln, ohne dass ich auf eine Lösung gekommen bin. :-/
Ehrlich gesagt, weiß ich mittler Weile gar nicht mehr, ob sich das so in 
TS umsetzen lässt.
Wenn es mal fertig ist, soll es diese Struktur haben:

<ul id="topnav">
    <li><a href="#" class="home">Home</a></li>
    <li>
        <a href="#" class="products">Products</a>
        <div class="sub">
            <ul>
                <li><h2><a href="#">Desktop</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Laptop</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Accessories</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Accessories</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#" class="sale">Sale</a></li>
    <li><a href="#" class="community">Community</a></li>
    <li><a href="#" class="store">Store Locator</a></li>
</ul>

Bisher bin ich so weit gekommen:

<ul class="topnav">
  <li><a class="startseite" onfocus="blurLink(this);" 
href="startseite/">Startseite</a></li>
  <li>
      <a class="produkte" onfocus="blurLink(this);" href="">Produkte</a>
    <div class="sub">
      <ul>
        <li><a class="Desktop" onfocus="blurLink(this);" 
href="#">Desktop</a></li>
        <li><a class="Spiele" onfocus="blurLink(this);" 
href="#">Spiele</a></li>
        <li><a class="Autos" onfocus="blurLink(this);" 
href="#">Autos</a></li>
        <li><a class="Desktop2" onfocus="blurLink(this);" 
href="#">Desktop2</a></li>
        <li><a class="Spiele2" onfocus="blurLink(this);" 
href="#">Spiele2</a></li>
        <li><a class="Autos2" onfocus="blurLink(this);" 
href="#">Autos2</a></li>
      </ul>    
    </div>
  </li>
  <li><a class="mehr" onfocus="blurLink(this);" href="mehr">Noch 
mehr</a></li>
</ul>

### Menü ###
lib.MENU = HMENU
lib.MENU {
entryLevel = 1
  ### Erste Ebene ###
1 = TMENU
1 {
wrap = <ul class="topnav">|</ul>
NO {
ATagParams = class = "{field:tx_realurl_pathsegment}"
allStdWrap.insertData = 1   
wrapItemAndSub = <li>|</li>
stdWrap.cObject = COA
stdWrap.cObject {
20 = TEXT
20.wrap = |
20.field = subtitle
}
}       
ACT < .NO
ACT = 1
ACT {
ATagParams = class = "{field:tx_realurl_pathsegment}"
allStdWrap.insertData = 1
} 
}
  ### Zweite Ebene ###
2 = TMENU
2 {
ATagParams = class = "{field:tx_realurl_pathsegment}"
allStdWrap.insertData = 1   
wrap = <div class="sub"><ul>|</ul></div>
NO {
ATagParams = class = "{field:tx_realurl_pathsegment}"
allStdWrap.insertData = 1   
     # expAll = 1
allWrap = <li>|</li>
stdWrap.cObject = COA
stdWrap.cObject {
20 = TEXT
20.wrap = |
20.field = subtitle
}
}     
}
}<ul id="topnav">
    <li><a href="#" class="home">Home</a></li>
    <li>
        <a href="#" class="products">Products</a>
        <div class="sub">
            <ul>
                <li><h2><a href="#">Desktop</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Laptop</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Accessories</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Accessories</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#" class="sale">Sale</a></li>
    <li><a href="#" class="community">Community</a></li>
    <li><a href="#" class="store">Store Locator</a></li>
</ul>

Bisher bin ich so weit gekommen:

<ul class="topnav">
  <li><a class="startseite" onfocus="blurLink(this);" 
href="startseite/">Startseite</a></li>
  <li>
      <a class="produkte" onfocus="blurLink(this);" href="">Produkte</a>
    <div class="sub">
      <ul>
        <li><a class="Desktop" onfocus="blurLink(this);" 
href="#">Desktop</a></li>
        <li><a class="Spiele" onfocus="blurLink(this);" 
href="#">Spiele</a></li>
        <li><a class="Autos" onfocus="blurLink(this);" 
href="#">Autos</a></li>
        <li><a class="Desktop2" onfocus="blurLink(this);" 
href="#">Desktop2</a></li>
        <li><a class="Spiele2" onfocus="blurLink(this);" 
href="#">Spiele2</a></li>
        <li><a class="Autos2" onfocus="blurLink(this);" 
href="#">Autos2</a></li>
      </ul>    
    </div>
  </li>
  <li><a class="mehr" onfocus="blurLink(this);" href="mehr">Noch 
mehr</a></li>
</ul>

und das dazu gehörige TS (Setup)

### Menü ###
lib.MENU = HMENU
lib.MENU {
entryLevel = 1
  ### Erste Ebene ###
1 = TMENU
1 {
wrap = <ul class="topnav">|</ul>
NO {
ATagParams = class = "{field:tx_realurl_pathsegment}"
allStdWrap.insertData = 1   
wrapItemAndSub = <li>|</li>
stdWrap.cObject = COA
stdWrap.cObject {
20 = TEXT
20.wrap = |
20.field = subtitle
}
}       
ACT < .NO
ACT = 1
ACT {
ATagParams = class = "{field:tx_realurl_pathsegment}"
allStdWrap.insertData = 1
} 
}
  ### Zweite Ebene ###
2 = TMENU
2 {
ATagParams = class = "{field:tx_realurl_pathsegment}"
allStdWrap.insertData = 1   
wrap = <div class="sub"><ul>|</ul></div>
NO {
ATagParams = class = "{field:tx_realurl_pathsegment}"
allStdWrap.insertData = 1   
     # expAll = 1
allWrap = <li>|</li>
stdWrap.cObject = COA
stdWrap.cObject {
20 = TEXT
20.wrap = |
20.field = subtitle
}
}     
}
}

Mir fehlt also innerhalb der 2. Ebene die Unterteilung der einzelnen 
Menupunkte in <ul>|</ul> und dazu noch der Titel der Unterseite in 
<h2>|</h2>.

Für Hinweise wäre ich sehr dankbar.

Vielen Dank

Gruß

Torsten