<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CSSLab: men&uacute; tipo &aacute;rbol</title>

<style type="text/css">
* {	margin: 0; padding: 0; }
body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; }
div#contenedor { width: 80%; margin: 20px auto; }
div#contenedor a { color: #F00; text-decoration: none; }
div#contenedor a:hover { color: #FFF; background: #F00; }

ul#menu_arbol, ul#menu_arbol ul {
	list-style-type: none;
	background: url(imagenes/linea_vertical.gif) repeat-y;
}

	ul#menu_arbol li {
		padding: 0 10px;
		background: url(imagenes/nodo.gif) no-repeat;
	}
	
		ul#menu_arbol li.cierre {
			background: #FFF url(imagenes/cierre.gif) left top no-repeat;
		}
		
	ul#menu_arbol ul {
		margin-left: 5px;
	}

		ul#menu_arbol ul li {
			font-size: 14px;
		}

</style>

<script type="text/javascript" src="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('snacks');
	mySlide.hide()
		$('toggle_2').addEvent('click', function(e){
			e = new Event(e);
			mySlide.toggle();
			e.stop();
		});
});


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


</script>

</head>

<body>

<div id="contenedor">

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

</body>
</html>