$(document).ready(function() {

    $('#proj, #projs').hover(function() {
        left = $('#proj').position().left;
        bottom =  $('#menu').height() - $('#proj').position().top;
        padding = $('#menu').outerHeight() - bottom + 10;
        $('#projs').css({
            left: left,
            bottom: bottom - 10,
            paddingBottom: padding
        }).show()
    }, function() {
        $('#projs').hide();
    });

    $('#projs .categoria').hover(function() {
        classe = $('.'+$(this).attr('rel'));
        classe.show()
        tope = $(this).offset().top;
        left = $(this).offset().left;
        width = $(this).width();
        classe.offset({
            top: (tope - classe.height()) + $(this).height(),
            left : (left + width)
        });
    }, function() {
        classe = $('.'+$(this).attr('rel'));
        classe.hide();
    });

    $('#projs .links div').hover(function() {
        $(this).show();
    }, function() {
        $(this).hide();
    })


});