Permitr menu infinito

Salve salve!

Galera, a alguns dias eu venho perdendo o sono em como resolver isso...

Eu tenho um menu (vertical) que funciona como acordion, este por sua vez, precisa abrir os "filhos" ilimitadamente, visto que será um menu para uma loja.

Da seguinte forma:

-CATEGORIA PAI

- CATEGORIA FILHO

- CATEGORIA FILHO

- CATEGORIA PAI

- CATEGORIA PAI

- CATEGORIA FILHO

- CATEGORIA FILHO

-CATEGORIA PAI

- CATEGORIA FILHO

- CATEGORIA FILHO

E para o auto e avante...

Porém, não estou conseguindo tal proeza... (Visto que não sei escrever em JS)...

Assim, caso possam, poderiam me dar uma ajuda nesta situação?

Desde já fico imensamente agradecido.

Este é meu código JS (retirado da NET):

// Evento de clique do elemento: ul#menu li.parent > a
$('ul#menu li.parent > a').click(function() {
// Expande ou retrai o elemento ul.sub-menu dentro do elemento pai (ul#menu li.parent)

 $('ul.sub-menu', $(this).parent()).slideToggle('fast', function() {
 // Depois de expandir ou retrair, troca a classe 'aberto' do <a> clicado
 $(this).parent().toggleClass('aberto');
 });
return false;
 });

==========================================================================

Este é o PHP:

public static function getHtmlMenu($menu){
 $return = '';
 foreach($menu as $m){
 $class = ($m['NIVEL'] == '0') ? 'parent' : '';
 $return .= '<li class="'.$class.'"><a href="'.SITEURL.'produtos/'.$m['ID'].'/'.$m['ALIAS'].'" title="'.$m['TITULO'].'">'.$m['TITULO'].'</a>'.PHP_EOL;
 if(sizeof($m['SUB']) > 0){
 $return .= '<ul class="sub-menu">'.PHP_EOL;
 $return .= self::getHtmlMenu($m['SUB']);
 $return .= '</ul>'.PHP_EOL;
 }
 $return .= '</li>'.PHP_EOL;
 }
 return $return;
 }

==========================================================================

Este é o CSS:

.parent > a {

 background: url("../images/menul.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
 color: #052754;
 display: block;
 font-size: 10.3px;
 font-weight: bold;
 height: 21px;
 padding: 5px 5px 0;
 text-transform: uppercase;

}

ul ul {

 display: none;
}

.sub-menu > li {

 background: none repeat scroll 0 0 #FFFFFF;
 height: 21px;
 overflow: hidden;
 padding: 1px 0;
 width: 243px !important;

}

.sub-menu a {

 background: none repeat scroll 0 0 #FFFFFF;
 border: 1px solid #CCCCCC;
 color: #052754;
 display: block;
 font-size: 12px;
 padding: 3px 0 3px 10px;
 text-transform: uppercase;

}

Abraços a todos!

Martins