Bisheriges Menü um 1 Ebene erweitern

Bisher hatte ich immer nur mit Menüs mit einer Ebene zu tun. Nun würde ich gerne das bestehende Menü um mögliche zweite Ebenen erweitern.

Hab nun schon viel rumprobiert und einiges aus dem Forum probiert, aber nichts hat funktioniert.

Wer kann mir helfen dieses Menü zu erweitern:

// Hauptnavigation erzeugen
lib.mainnav = COA
lib.mainnav {
  // Eine ungeordnete Liste öffnen
  10 = HTML
  10.value = <ul id="submenu"> <li id="title">foo-bar</li>

  // Die Menüpunkte für nicht registrierte Benutzer
  20 = HMENU
  20 {
    special = list
    // Die Seiten-IDs an die eigene Website anpassen
    special.value = 2,7,5,4
    1 = TMENU
    1 {
      noBlur = 1
      accessKey = 1
      NO = 1
      NO {
        ATagTitle.field = abstract // description // subtitle
        stdWrap.htmlSpecialChars = 1
        allWrap = <li>|</li>
        allWrap.insertData = 1
      }
      CUR < .NO
      CUR.doNotLinkIt = 1
      CUR.allWrap = <li id="active"><strong>|</strong></li>
      ACT < .NO
      ACT.allWrap = <li>|</li>
    }
  }

  // Die ungeordnete Liste schließen
  30 = HTML
  30.value = </ul>
}

Guckst du hier!!

Daniel

Ich befürchte, dass ich vielleicht zu wenige Informationen gegeben habe.

So sieht bisher meine Seitenstruktur aus:

- Weltkugel
--ROOT
---Startseite
----Seite 1
----Seite 2
-----Seite 2.1
----Seite 3
----Seite 4
---Sysordner
---Typoscript-Sysordner

Mein CSS für das Menü lautet:

  #submenu {
    width: 100%;
    overflow: hidden;
    margin: 2.4em 0 1.5em 0;
    list-style-type: none;
    border-top: 2px #ddd solid;
    border-bottom: 2px #ddd solid;
  }

  #submenu ul { list-style-type: none; margin:0; padding: 0; }
  #submenu li { float:left; width: 100%; margin:0; padding: 0; }

  #submenu a,
  #submenu strong {
    display:block;
    width: 90%;
    padding: 3px 0px 3px 10%;
    text-decoration: none;
    background-color:#fff;
    color: #FF9900;
    border-bottom: 1px #eee solid;
  }

  /* Menu Title */
  #submenu li#title {
    width: 90%;
    padding: 3px 0px 3px 10%;
    font-weight: bold;
    color: #444;
    background-color: #fff;
    border-bottom: 4px #888 solid;
  }

  #submenu li span {
    display:block;
    width: 90%;
    padding: 3px 0px 3px 10%;
    font-weight: bold;
    border-bottom: 1px #ddd solid;
  }

  /* Level 1 */
  #submenu li#active,
  #submenu li strong {
    width: 90%;
    padding: 3px 0px 3px 10%;
    font-weight: bold;
    color: #FF9900;
    background-color:#fff;
    border-bottom: 1px #eee solid;
  }

  #submenu li a { width: 90%; padding-left: 10%; background-color:#fff; color: #444; }
  #submenu li a:focus,
  #submenu li a:hover,
  #submenu li a:active { background-color:#FF9900; color: #fff; }

  /* Level 2 */
  #submenu li ul li a,
  #submenu li ul li#active,
  #submenu li ul li strong,
  #submenu li ul li span { width: 80%; padding-left: 20%; }

  #submenu li ul li a { background-color:#f8f8f8; color: #666; }
  #submenu li ul li a:focus,
  #submenu li ul li a:hover,
  #submenu li ul li a:active { background-color:#FF9900; color: #fff; }

  /* Level 3 */
  #submenu li ul li ul li a,
  #submenu li ul li ul li#active,
  #submenu li ul li ul li strong,
  #submenu li ul li ul li span { width: 70%; padding-left: 30%; }

  #submenu li ul li ul li a { background-color:#fcfcfc; color: #888; }
  #submenu li ul li ul li a:focus,
  #submenu li ul li ul li a:hover,
  #submenu li ul li ul li a:active { background-color:#FF9900; color: #fff; }

  /* Level 4 */
  #submenu li ul li ul li ul li a,
  #submenu li ul li ul li ul li#active,
  #submenu li ul li ul li ul li strong,
  #submenu li ul li ul li ul li span { width: 60%; padding-left: 40%; }

  #submenu li ul li ul li ul li a { background-color:#ffffff; color: #aaa; }
  #submenu li ul li ul li ul li a:focus,
  #submenu li ul li ul li ul li a:hover,
  #submenu li ul li ul li ul li a:active { background-color:#FF9900; color: #fff;

Der HTML Code soll dann so aussehen:
So soll das Menü dann geparsed aussehen:

<ul id="submenu">
  <li id="title">foo-bar</li>
  <li id="active"><strong><a href="#">Item 1</a></strong></li>
  <li><a href="#">Item 2 </a>
    <ul>
      <li><a href="#">Item 2.1 </a>
        <ul>
          <li><a href="#">Item 2.1.1 </a></li>
          <li><a href="#">Item 2.2.2 </a>
            <ul>
              <li><a href="#">Item 2.1.1.1</a></li>
              <li><a href="#">Item 2.2.2.2 </a></li>
            </ul>
          </li>
          <li><a href="#">Item 2.2.3 </a></li>
          <li><a href="#">Item 2.2.4 </a></li>
        </ul>								
      </li>
      <li><a href="#">Item 2.2 </a></li>
    </ul>
  </li>
  <li><a href="#">Item 3 </a></li>
  <li><a href="#">Item 4 </a></li>
</ul>

Da hat d.walter dir doch genau den korrekten Link geschickt. Da stehen alle Menüs verzeichnet.