window.addEvent('domready', function(){
  /**
   * Navigation slider
   */
  $$('#navigation li ul').each(function (element, index){

    // build the slider for each sub menus
    var slide = new Fx.Slide(element, { 'duration': 500 });
    slide.hide(); // hide on load

    // events for the slider
    element.getParent().getParent().addEvents({
      // mouse enter event opened the slide
      'mouseenter': function(e){
        slide.slideIn();
      },
      // mouse leave event close the slide after 500 milliseconds
      'mouseleave': function(e){
        (function(){ slide.slideOut(); }).delay(500);
      }
    }); // end element's events
	}); // end each function
});