var tg = $$('.navi a');
var here = new Element('div', {styles:{'position':'absolute','width':20,'height':20, 'top':-20, 'left':'auto', 'background':'#eec'}}).inject(document.body, 'top');

var morph = new Fx.Morph(here, {
 duration: 50,
 transition: Fx.Transitions.Cubic.easeInOut,
 wait: false,
 link:'cancel'
});

var moving = new Fx.Move(here, {
 duration: 500,
 transition: Fx.Transitions.Quad.easeIn,
 wait: false,
 link:'cancel'
});

tg.each(function(e){
 var ch = e.getStyles('width','height');
 e.addEvents({
  'mouseenter':function(){
   morph.start(ch).chain(
    function(){moving.start({relativeTo:e});}
   );
  },
  'mouseleave':function(){
   $$('.navi .active').fireEvent('mouseenter');
  }
 });
});

$$('.navi .active').fireEvent('mouseenter');

これは使わんなぁ。。。

サンプルはこのページのグローバルナビ部分です。