fade in for background-color(button) and drop down menu superfish menu

Question

I use a modified drop down menu from superfish. I want to add a independent fade in effect for the drop down menu. The background-color by mouseover and the drop down box should fade in slowly.

I added the menu on fiddle: http://jsfiddle.net/g9usjkto/2/

i tryed already:

 transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;

Thanks, with best regards, Danny77.

Answer 1

take a look at this submenu, it is highly and easily controllable, expandable and editable: DEMO

$('#menu li').hover(function(){
    var i=$(this).index();
    var submenu=$('.submenu').eq(i);
    submenu.css({
        left:$(this).offset().left+'px',
        top:($(this).offset().top+$(this).outerHeight())+'px'
    }).stop().fadeIn(200);
},function(){
    var i=$(this).index();
    var submenu=$('.submenu').eq(i);
    submenu.stop().fadeOut(200);
});
$('.submenu').hover(function(){
    $(this).stop().show();
},function(){
    $(this).fadeOut(200);
});