Ecco un'ulteriore soluzione:

codice:
XHTML

<ul id="menu">[*]
      <span>Verdura</span>
      <ul>[*]Pomodori[*]Carote[/list]
   [*]
      <span>Frutta</span>
      <ul>[*]Mele[*]Pere[/list]
   [/list]


CSS

.menu_nascosto
{
   position:absolute; top:-100px;
   width:1px; height:1px;
   overflow:hidden;
}
.menu_titolo
{
   color:blue;
   text-decoration:underline;
   cursor:pointer;
}


Javascript

window.onload = function()
{
   // Prepariamo tutti gli attori dello script
   var menu = document.getElementById('menu')
   var menu_elementi = menu.childNodes
   var sotto_menu = new Array()
      for (var i = 0; i < menu_elementi.length; i++)
      {
         if ( menu_elementi.item(i).nodeType == menu_elementi.item(i).ELEMENT_NODE )
         {
            sotto_menu.push(menu_elementi.item(i))
         }
      }
   var sotto_menu_titoli = new Array()
      for (var i = 0; i < sotto_menu.length; i++)
      {
         var titolo_corrente = sotto_menu[i].getElementsByTagName('span').item(0)
         sotto_menu_titoli.push(titolo_corrente)
      }
   var sotto_menu_voci = new Array()
      for (var i = 0; i < sotto_menu.length; i++)
      {
         var voci_corrente = sotto_menu[i].getElementsByTagName('ul').item(0)
         sotto_menu_voci.push(voci_corrente)
      }

   // Prepariamo le funzioni 'visualizza' e 'nascondi'
   function nascondi_menu(indice, menu_corrente)
   {
      sotto_menu_voci[indice].className = 'menu_nascosto'
      menu_corrente.onclick = function()
      {
         visualizza_menu(indice, menu_corrente)
      }
   }
   function visualizza_menu(indice, menu_corrente)
   {
      sotto_menu_voci[indice].className = ' '
      menu_corrente.onclick = function()
      {
         nascondi_menu(indice, menu_corrente)
      }
   }

   // Attribuiamo le funzioni ad ogni sotto-menu
   var indice_menu = 0
   for (var i = 0; i < sotto_menu_titoli.length; i++)
   {
      sotto_menu_titoli[i].onclick = function()
      {
         visualizza_menu(indice_menu, this)
         indice_menu++
      }
   }

   // Rendiamo visivamente simili a link i titoli cliccabili dei sotto-menu
   for (var i = 0; i < sotto_menu_titoli.length; i++)
   {
      sotto_menu_titoli[i].className = 'menu_titolo'
   }

   // Inizializziamo la pagina nascondendo tutti i sotto-menu
   for (var i = 0; i < sotto_menu_voci.length; i++)
   {
      sotto_menu_voci[i].className = 'menu_nascosto'
   }
}
Ti ho modificato leggermente il mark-up, proponendoti una soluzione che trovo più appropriata dal punto di vista semantico.

Da notare come questo script javascript funzioni con un numero arbitrario di sotto-menu in quanto non serve andare ad inserire attributi di evento o altre porcherie nella marcatura.