$(function(){
    var timer,
        current = null;//the current opened sub menu
    $('#navi-ul>.sub').hover(function(){
        current && current.hide();
        clearTimeout(timer);
        var t = $(this);
        current = $('#'+t.attr('data-sub')).css('left', t.offset().left-1).show();
    }, function(){
        timer = setTimeout(function(){
            current.hide();
            current = null;
        }, 20);
    });
    $('.sub-menu').hover(function(){
        clearTimeout(timer);         
    }, function(){
        timer = setTimeout(function(){
            current.hide();
            current = null;
        }, 20);
    });
});