Salve, mi sono avvicinato da qualche giorno per la prima volta al javascript e mi trovo a dover affrontare un quesito probabilmente semplice per chi ha un poco di esperienza.

Il problema è il seguente:
Devo creare un sito web con un menù a più livelli, all'inizio solo il primo livello sarà visibile, in seguito, cliccando, apparirà il secondo livello e così via.

La struttura è molto semplice ed è di questo tipo:

codice:
<ul>[*] Pagina1[*] Pagina2
           <ul>[*] SubPage2a[*] SubPage2b[/list][/list]
La mi idea era, utilizzando jQuery di creare un semplice script che cliccando su un determinato[*] mi facesse apparire l'<ul> sottostante.

Al momento tutti gli <ul> dal secondo livello in giù sono display: none, quel che dovrà fare pertanto è semplicemente cambiare il valore dell'attributo.

Questo è il codice javascript che ho scritto e che non funziona in cui sicuramente ci saranno errori, ho provato a leggere qualche guida e documentazione ma non ne sono venuto a capo, pertanto se qualcuno riuscisse a correggermelo e darmi la soluzione, così che possa capirla e utilizzarla in futuro saranno un grande aiuto.

codice:
function showmenu() {
    jQuery(this).jQuery("ul:first-child");
    display: show;
}

jQuery("#rightbar li").click(showmenu);
Cerco di spiegare il perchè di quel che ho fatto.

Io non posso lavorare direttamente sul mio html, quindi per bindare i[*] ho usato jQuery("#rightbar li").click(showmenu);, l'argomento di jQuery ma a selezionarmi i[*] che mi interessano e dovrebbe bindarli con OnClick che chiama la funzione showmenu.

La funzione invece dovrebbe semplicemente settare il valore display a show, del primo <ul> sotto il[*] cliccato.

Spero di aver spiegato decentemente il mio problema, grazie mille a chi mi risponderà!