window.addEvent('domready', function(){
	//First Example

$$('.menu_item').each(function(a){

childdivs = a.getChildren();
thedrop = childdivs[1];
                 			
thedrop.fade('out');
		                 	
                  	// The same as before: adding events
                  	a.addEvents({
                  		'mouseenter': function(){
											
												childdivs = a.getChildren();
												thedrop = childdivs[1];
												thedrop.fade('in');
												
												newheight = thedrop.offsetHeight +24;
												
                  			// Always sets the duration of the tween to 1000 ms and a bouncing transition
                  			// And then tweens the height of the element
                  			this.set('tween', {
                  				duration: 1000,
                  				transition: Fx.Transitions.Quart.easeOut // This could have been also 'bounce:out'
                  			}).tween('height', newheight+'px');
                  		},
                  		'mouseleave': function(){
												
												childdivs = a.getChildren();
												thedrop = childdivs[1];
                  			
												thedrop.fade('out');
											
                  			// Resets the tween and changes the element back to its original size
                  			this.set('tween', {}).tween('height', '24px');
                  		}
                  	});
										
});


                    $$('.menu_li').each(function(li){
											 
											 var myFx = new Fx.Tween(li, {property: 'background-color'});
                          
                      
											 li.addEvents({
                  		 'mouseenter': function(){
											 myFx.start('#379fff','#0063c8').chain(
                              //Notice that "this" refers to the calling object (in this case, the myFx object).
                              function(){ this.start('#0063c8','#379fff'); }
                          ); 


                  		 }
                  	});
                    });
										
										
										$('sub_menu_header').addEvents({
                          'mouseover': function(){
                             
														 ul = this.getParent();
														 parentdiv = ul.getParent();
														 maindiv = parentdiv.getParent();
														 
														 maindiv.set('tween', {}).tween('height', '683px');
														 
														 
														 this.set('tween', {}).tween('height', '202px');

                          },
                          'mouseleave': function(){
															this.set('tween', {}).tween('height', '34px');
                          }
                      });


});