[CONS] Problema sitemap arbol

<div id="contenedor">
<ul id="menu_arbol">
<li><a title="Ver las Cervezas" id="toggle_c" href="#">Cervezas</a>
<ul id="cervezas">
<li><a title="Enlace a cerveza Pilsen" href="#">Pilsen</a></li>
<li><a title="Enlace a cerveza Bock" href="#">Bock</a></li>
<li><a title="Enlace a cerveza Lager" href="#">Lager</a></li>
<li><a title="Enlace a cerveza Ale" href="#">Ale</a></li>
</ul>
</li>
<li><a title="Ver los Vinos" id="toggle_v" href="#">Vinos</a>
<ul id="vinos">
<li><a title="Enlace a Vino Merlot" href="#">Merlot</a></li>
<li><a title="Enlace a Vino Sirah" href="#">Sirah</a></li>
</ul>
</li>
<li><a title="Ver los Licores" id="toggle_l" href="#">Licores</a>
<ul id="licores">
<li><a title="Enlace Licor Ron" href="#">Ron</a></li>
<li><a title="Enlace a Licor Vodka" href="#">Vodka</a></li>

<li><a title="Ver los foro" id="toggle_t" href="#">foro</a>
<ul id="foro">
<li><a title="1" href="#">1</a></li>
<li><a title="2" href="#">2</a></li>

</ul>
</li>
</ul>
</li>
</ul>

* {
margin: 0;
padding: 0;
}
div#contenedor {
margin: 20px auto;
background-color: #f5f5f5;
width: 80%;
}
div#contenedor a {
font-weight: inherit;
text-decoration: none;
font-family: Verdana;
color: black;
font-size: 14px;
}
div#contenedor a:hover {
background: #f5f5f5 none repeat scroll 0% 50%;
color: black;
text-decoration: none;
}
ul#menu_arbol, ul#menu_arbol ul {
background: transparent url(http://img.webme.com/pic/t/tecol/linea_vertical.gif) repeat-y scroll 0% 50%;
list-style-type: none;
}
ul#menu_arbol li {
padding: 0 10px;
background: transparent url(http://img.webme.com/pic/t/tecol/nodo.gif) no-repeat scroll 0% 50%;
}
ul#menu_arbol li.cierre {
background: #ffffff url(http://img.webme.com/pic/t/tecol/cierre.gif) no-repeat scroll left top;
}
ul#menu_arbol ul {
margin-left: 5px;
}
ul#menu_arbol ul li {
font-size: 14px;
background-color: #f5f5f5;
}

<script type="text/javascript" src="http://www.csslab.cl/ejemplos/menu_arbol/js/mootools.js"></script>


<script type="text/javascript">

window.onload = function () {
  var tree = document.getElementById("menu_arbol");
  var lists = [ menu_arbol ];
  for (var i = 0; i < tree.getElementsByTagName("ul").length; i++)
   lists[lists.length] = tree.getElementsByTagName("ul")[i];
  for (var i = 0; i < lists.length; i++) {
   var item = lists[i].lastChild;
   while (!item.tagName || item.tagName.toLowerCase() != "li")
      item = item.previousSibling;
      item.className += " cierre";
  }
};


window.addEvent('domready', function(){
   var mySlide = new Fx.Slide('cervezas');
   mySlide.hide()
      $('toggle_c').addEvent('click', function(e){
         e = new Event(e);
         mySlide.toggle();
         e.stop();
      });
});

window.addEvent('domready', function(){
   var mySlide = new Fx.Slide('vinos');
   mySlide.hide()
      $('toggle_v').addEvent('click', function(e){
         e = new Event(e);
         mySlide.toggle();
         e.stop();
      });
});

window.addEvent('domready', function(){      
   var mySlide = new Fx.Slide('licores');
   mySlide.hide()
      $('toggle_l').addEvent('click', function(e){
         e = new Event(e);
         mySlide.toggle();
         e.stop();
      });
});

window.addEvent('domready', function(){
    var mySlide = new Fx.Slide('foro');
    mySlide.hide()
        $('toggle_t').addEvent('click', function(e){
            e = new Event(e);
            mySlide.toggle();
            e.stop();
        });
});

  </script>