Ciao ragazzi,
ho un menu con una struttura di questo tipo:

<div>
<ul>
<li_padre>Menu1
<ul>
<li_figlio>Sub_Menu1.1</li_figlio>
<li_figlio>Sub_Menu1.2</li_figlio>[/list]
</li_padre>
...
(li_padre e li_figlio li utilizzo per spiegarmi nel modo migliore nel seguito della mia richiesta)

e vorrei fare in modo che quando viene selezionato con un solo click uno dei tre collegamenti, questo subisca il cambio di colore e, nel caso in cui venga selezionato nuovamente, riacquisti il colore originario. A tal proposito ho fatto in questo modo: ho aggiunto un attributo class ad ogni list-item che viene avvalorato ai valori on e off in base al click. Per gestire il cambio di colore ho fatto in questo modo:

if (li_figlio.addEventListener) {
li_figlio.addEventListener("click", function(event){
if (this.getAttribute("class")=="on_syns") {this.setAttribute("class", "off_syns");}
else {this.setAttribute("class", "on_syns");}},
true);}

if (li_padre.addEventListener) {
li_padre.addEventListener("click", function(event){
if (this.getAttribute("class")=="on") {this.setAttribute("class", "off");}
else {this.setAttribute("class", "on");}},
true);}

il mio problema è che quando clicco sul li_padre tutto funziona correttamente, ma se clicco sui li_figli mi cambia anche il colore del padre.
Qualcuno è in grado di darmi una mano? Credo che ci sia qualche problema con l'utilizzo della "parola chiave" this, ma non riesco proprio ad uscire da questa situazione.

Ciao e grazie