jQuery UI menu inside a jqGrid cell

问题

I have created a grid and customized a column to contain a jquery UI menu like in the Split Button example

Everything works fine except for the fact that the menu window appear inside the cell causing a bad visual effect, that is, the cell height increase to make room for the menu window. Have a look at the following screenshot for a visual explanation (nevermind about the menu item in disabled state).

Is there any way way to make the menu window appear on top of the table element in term of z-index?

Thanks very much for your valuable help, community :)

EDIT as per comment request:

The code to create the splitbutton menu is the following. First the column model markup

{ name: 'act', index: 'act', width: 80, sortable: false, search: false, align: 'center',
  formatter: function (cellvalue, options, rowObject) {
      var markup = "<div>" +
                      "<div class='actionsButtonset'>" +
                          "<button class='dshbd_ConfirmMonth' rel='" + rowObject.UmltID + "' rev='" + rowObject.IsConfirmAvailable + "' plock='" + rowObject.IsPeriodLocked + "' alt='Confirm'>Confirm</button>" +
                          "<button class='btnSelectMenu' rev='" + rowObject.IsUmltLocked + "' " + ">Select</button>" +
                      "</div>" +
                      "<ul class='actionMenu'>" +
                          "<li><a class='dshbd_UnlockMonth' href='#' rel='" + rowObject.UmltID + "' alt='Unlock'>Unlock</a></li>" +
                      "</ul>" +
                   "</div>";
      return markup;
  }
}

Then, inside the gridComplete event I have the following code (please note that some code is needed to enable/disable menu items

var confirmMonthBtn = $('.dshbd_ConfirmMonth');
$.each(confirmMonthBtn, function (key, value) {
    var button = $(this);
    var umltID = button.attr('rel');
    button.button().click(function (event) {
        event.preventDefault();
    });
    var isPeriodLocked = (button.attr('plock') === 'true');
    if (!isPeriodLocked) {
        var isConfirmAvailable = ($(this).attr('rev') === 'true');
        if (!isConfirmAvailable) {
            button.button({ disabled: true });
        }
    } else {
        button.button({ disabled: true });
    }
});
var currentPeriod = GetCurrentPeriod();
var period = GetCurrentViewPeriod();
var isCurrent = false;
if (currentPeriod != null && period != null) {
    isCurrent = period.PeriodID == currentPeriod.PeriodID;
}
var selectBtns = $('.btnSelectMenu');
$.each(selectBtns, function (key, value) {
    var button = $(this);
    button.button({ text: false, icons: { primary: 'ui-icon-triangle-1-s'} });
    button.click(function (event) {
        var menu = $(this).parent().next().show();
        menu.position({
            my: 'left top',
            at: 'left bottom',
            of: this
        });
        $(document).on('click', function () {
            menu.hide();
        });
        return false;
     });
     $('div.actionsButtonset').buttonset();
     var menuElement = button.parent().next();
     menuElement.hide();
     menuElement.menu({
         select: function (event, ui) {
             var umltID = ui.item.children().attr('rel');
             event.preventDefault();
         }
     });
     if (!isCurrent) {
         var isPeriodLocked = ($(this).attr('plock') === 'true');
         if (isPeriodLocked) {
             menuElement.menu({ disabled: false });
         } else {
             var isUmltLocked = ($(this).attr('rev') === 'true');
             menuElement.menu({ disabled: !isUmltLocked });
         }
     } else {
         //The current period is always unlocked
         menuElement.menu({ disabled: true });
     }
});