vertikales ausklappbares 4 Ebenen Menu auf CSS Basis

Hallo,

Ziel: Ein vertikales Menu auf der linken Seite, wobei die Submenu-Items nach unten ausklappen; das Menu soll 4 Unterebenen haben.

Problem: Das Menu zeigt nur die Ebenen bis zur 2. Ebene an.

Frage: Wie erreiche ich, dass sämtliche Unterebenen oder Submenus (3, 4, ...) jeweils angezeigt werden?

Ausgangslage:

temp.MenuLinks = HMENU
temp.MenuLinks {
entryLevel=0
    # erstes level
  1 = TMENU
  1.wrap = <ul id="navi">|</ul>
  1{
    	  # no state: normale Formatierung
    noBlur=1 
    NO{
      wrapItemAndSub = <li>|</li>
    }
     		# act state: gültig von der rootseite bis zur aktuellen Seite
    ACT=1
    ACT{
      wrapItemAndSub = <li>|</li>
      ATagParams = class = "nohref act"
    }
     		# cur state: gültig für die aktuelle Seite
#    CUR=1
#    CUR{
#      wrapItemAndSub = <li class="act">|</li>
#    }
  }

  2 = TMENU
  2.wrap = <ul id="navi">|</ul>
  2{
    	  # no state: normale Formatierung
    noBlur=1 
    NO{
      wrapItemAndSub = <li>|</li>
    }
     		# act state: gültig von der rootseite bis zur aktuellen Seite
    ACT=1
    ACT{
      wrapItemAndSub = <li>|</li>
      ATagParams = class = "nohref act"
    }
     		# cur state: gültig für die aktuelle Seite
#    CUR=1
#    CUR{
#      wrapItemAndSub = <li class="act">|</li>
#    }
  }

  3 = TMENU
  3.wrap = <ul id="navi">|</ul>
  3{
    	  # no state: normale Formatierung
    noBlur=1 
    NO{
      wrapItemAndSub = <li>|</li>
    }
     		# act state: gültig von der rootseite bis zur aktuellen Seite
    ACT=1
    ACT{
      wrapItemAndSub = <li>|</li>
      ATagParams = class = "nohref act"
    }
     		# cur state: gültig für die aktuelle Seite
#    CUR=1
#    CUR{
#      wrapItemAndSub = <li class="act">|</li>
#    }
  }

  4 = TMENU
  4.wrap = <ul id="navi">|</ul>
  4{
    	  # no state: normale Formatierung
    noBlur=1 
    NO{
      wrapItemAndSub = <li>|</li>
    }
     		# act state: gültig von der rootseite bis zur aktuellen Seite
    ACT=1
    ACT{
      wrapItemAndSub = <li>|</li>
      ATagParams = class = "nohref act"
    }
     		# cur state: gültig für die aktuelle Seite
#    CUR=1
#    CUR{
#      wrapItemAndSub = <li class="act">|</li>
#    }
  }

}

HTML

<div id="content_wrap">
   <!-- Navigation -->
	<div id="nav">
	 <!-- ###MENU_LINKS### Start -->
	Menu
	<!-- ###MENU_LINKS### Stop -->
	</div>
</div>

CSS

#nav
{
clear:left;
float:left;
width:150px;
margin:0 0 10px 0;
padding:0;
}

#nav ul
{
list-style:none;
width:159px;
margin:0 0 0 0;
padding:0;
}

#nav li
{
margin-bottom:0px;
}

#nav li a
{
font-weight:normal;
font-size:10px;
height:20px;
text-decoration:none;
color:#505050;
display:block;
padding-left:30px;
padding-top:5px;
padding-bottom:0px;
background:#f4f4f4 url(../images/menu.jpg) bottom left repeat-x;
}

#nav li a:hover
{
background-image:url(../images/menu_hover.jpg);
background-repeat:no-repeat;
background-position:bottom;
color:#000000;
}

#navi li .act
{
background-image:url(../images/menu_act.jpg);
background-repeat:no-repeat;
background-position:bottom;
color:#000000;
font-weight: bolder;
}

#nav li li a
{
font-weight:normal;
font-size:10px;
height:20px;
text-decoration:none;
color:#505050;
display:block;
padding-left:40px;
padding-top:5px;
padding-bottom:0px;
background:#f4f4f4 url(../images/menu_sub.jpg) bottom left repeat-x;
}

#nav li li a:hover
{
background-image:url(../images/menu_hover_sub.jpg);
background-repeat:no-repeat;
background-position:bottom;
color:#000000;
font-weight: bolder;
}

#navi li li .act
{
background-image:url(../images/menu_sub_act.jpg);
background-repeat:no-repeat;
background-position:bottom;
color:#000000;
font-weight: bolder;
}