Bottom flap menu

Updated JS and jsfiddle

I made an example online at jsfiddle . I assume you intend to have actions, and this is a listing of records, so I made a reference of the ID of the DIV with the ID of the record. With it you go to JS to do the actions.

HTML

<div class="group">
    <div class="elemento" id="1">Rod</div>
</div>

<div class="group">
    <div class="elemento" id="2">Papa Charlie</div>
</div>

JS

$(document).ready(function()
{
    $('.group').bind('mouseenter', function() {
        var html = '<div id="botoes"><b>Botão 1</b>, <b>Botão 2</b>, <b>Botão 3</b></div>';
        $(this).closest('div').append(html).css( "background", "#FFFFCC" )
        $('#botoes').show();
    });

    $('.group').bind('mouseleave', function() {
        $(this).css( "background", "#ffffff" )
        $('#botoes').remove();
    });

});

CSS

*{font-family:"Tahoma", "Arial", sans-serif; font-size:12px}
.elemento{border:#f3f3f3 solid 1px; padding:5px; margin:2px}
#botoes{background:#FFFFCC; border:#f3f3f3 solid 1px; padding:5px; margin:2px 2px 2px 100px; width:170px; margin-top:-4px; border-top:none; display:none; position:absolute; text-align:center}

You can do this button functionality directly in CSS:

/* Div dentro da sua <td>, contendo os botões */
.embrulho{
    position:relative;
    overflow:hidden;
}    
tr:hover .embrulho{
    overflow:visible;
}

/* div que vai aparecer com os botões dentro da .embrulho */
.botoes{
    position:absolute;
}

Example of the operation: FIDDLE

In order to trigger events on the buttons you can create a attribute (like in the @PapaCharlie response) on each of the buttons and then pull them with JavaScript:

// pode ser usado com onclick="retornaId(this)", ou com um listener, etc.
function retornaId(el){
    return el.getAttribute('data-id');
}

Full example: FIDDLE