Multiple hover effects at the same time for a dropdown-menu

Question

I´d like to show a submenu mouse over:

1. fadein ( opacity: 0 -> opacity : 1) effect and
2. position movement (position: absolute; top:20px -> top:50px) at the same time like this: http://www.tuttoaster.com/wp-content/uploads/demos/3/navigation.html

But without "slideUp" and "slideDown". The whole box should move. Eg http://panic.com/coda/ the hover effect/tooltip on "Download".

jQuery:

$(function(){

$('.sub-menu li').hover(
   function(){

$('ul', this).stop().animate({opacity: '1', top: '50px'}, 800);
},
function() {
$('ul', this).stop().animate({opacity : '0', top: '20px'}, 300);
});
});

My actuel code is visible on jsfiddle http://jsfiddle.net/C4c46/1/

Thanks

Answer 1

This solution works great for me:

In action http://jsbin.com/iquwuc/6/edit#preview

$(document).ready(function(){
$('.sub-menu li#access ul').hide();
    $('.sub-menu li#access').hover(function(){
        $('.sub-menu li#access ul').stop().animate({opacity: "show", marginTop: "25"}, 500);
        },
        function() {
        $('.sub-menu li ul').stop().animate({opacity: "hide", marginTop: "10"}, 500);
        });
});