HTML:
codice:
<ul>
<li class="menu">Radice
<ul class="submenu" id="submenu-1">
<li class="menu">Canale 1
<ul class="submenu" id="submenu-1-1">[*]Link[*]Link[/list]

<li class="menu">Canale 2
<ul class="submenu" id="submenu-1-2">[*]Link[*]Link[/list]

<li class="menu">Canale 3
<ul class="submenu" id="submenu-1-3">[*]Link[*]Link[/list]
[/list]
[/list]
Javascritp:
codice:
<script>

    /* gestione del menu */
    function mmenu(ID)
    { var menu = document.getElementById(ID);
      var display = menu.style.display;
      menu.style.display = (display == "block") ? "none" : "block";
      menu.parentNode.style.listStyleImage = (display == "block") ? "url(../piu.jpg)" : "url(../meno.jpg)";
    }

    /* inizializzazione del menu */
    window.onload = function()
    { var uls = document.getElementsByTagName("ul");
      for (i=0;i<uls.length;i++) {
      if(uls[i].getAttribute("class")=="submenu")uls[i].style.display = "none";
      if(uls[i].getAttribute("id") && uls[i].getAttribute("id").search("submenu-")!= -1) uls[i].style.display = "none";
    }
    }
</script>
CSS:
codice:
<style>

    ul
    { list-style: disc url(../meno.gif);
      margin:     0;
      padding:    8 2em;
    }
    li.menu
    { list-style: square url(../meno.jpg);
    }

</style>

Devi naturalmente sostituire meno.jsp e piu.jpg con delle immagini tue