window.addEvent('domready', function() {

  var list = $$('#navi li');

  list.each(function(element) {
  //console.log(element);
    if (myNavi = element.getElement('ul')) {
//    if ($(element).getElement('ul')) {
//          myNavi = $(element).getElement('ul');      

          myNavi.setStyles({
              opacity: 0,
              display: 'none',
              'margin-top': -20
          });

          var myFx = new Fx.Morph(myNavi, {
            fps: 30,
            unit: 'px',
            duration:400,
            link:'cancel',
            transition: Fx.Transitions.Quad.easeOut
          });
                    
        
          element.addEvent('mouseenter', function(){
            myFx.element.setStyle('display', 'block');
//            myFx.element.setStyle('visibility', 'visible');
    
            myFx.start({
              'margin-top':0,
              'opacity':1
            });
          });
      
          element.addEvent('mouseleave', function(){
    
            myFx.start({
              'margin-top':-20,
              'opacity':0
            });
          });
    }     

  });

});