Split Button in Grid displaying behind rows - Kendo UI

Question

I have been using kendo-ui Grids and have been trying to integrate their split buttons into the grids.

My problem is that the dropdown menu for the split button is displaying behind the rows under it. I have been fiddling with the dropdown css in the inspector and haven't been able to get the menu to show in front.

I've been mainly looking at the .k-animation-container that is generated when expanding the split button. It gets generated with position: absolute and z-index: 1002. So far tweaking z-index and position values for the dropdown and surrounding elements hasn't yielded a solution.

I would suggest looking at this fiddle, code included here for completeness.

Javascript

(function () {
  gridName = '#theGrid';
    $(gridName).kendoGrid({
    columns: [
            {
                title: '',
                field: '',
                filterable: false,
                width: 200,
                template: function (dataItem) {             
                    return $('#splitBtnTemplate').clone().html();
                }
            },
            { title: 'Subject', field: 'Subject', filterable: true, width: 200 },                 
            { title: 'Status', field: 'Status', filterable: true, width: 80 }
        ],
        dataSource: {
            data: [
                { Subject: "Subject", Sent: "Sent", Completed: "Completed",  Status: "Status1"},
                { Subject: "Subject", Sent: "Sent", Completed: "Completed",  Status: "Status2"},
                { Subject: "Subject", Sent: "Sent", Completed: "Completed",  Status: "Status3"},
            ],
        },
        dataBound: function(e){
            $(".myMenu").kendoMenu({
                openOnClick: true
        });
        }   
    });    
})();

HTML

<div id="theGrid" class=""></div>

<div style="display: none;" id="splitBtnTemplate">
  <ul class="myMenu">
    <li class="defaultItem" data-action="1">Actions</li>
    <li class="emptyItem"><span class="empty">&nbsp;</span>
    <ul>
        <li onclick="actionBtn();">Cancel</li>
        <li onclick="actionBtn();">View</li>
        <li onclick="actionBtn();">Upload</li>
      </ul>
    </li>
 </ul>
</div>

CSS

.myMenu {
    display: inline-block;
    height: 28px;
    font:12px sans-serif;
}
    .myMenu .k-animation-container {

    }
    .myMenu .defaultItem{
        margin-top: -1px;
        height: 28px;
    }

    .myMenu .emptyItem {
        border-right-width: 0;
        margin-right: -1px;
        height: 28px;
    }

    .myMenu .k-first{
        border-bottom: none !important;
        margin-top: -1px;
    }

        .myMenu .emptyItem > .k-link {
            padding-left: 0 !important;
        }

Answer 1

Looks like it's because of the overflow: hidden on the table cell. This seems to do the trick:

.k-grid td {
    border-style: solid;
    border-width: 0 0 0 1px;
    padding: .4em .6em;
    /* overflow: hidden; */
    line-height: 1.6em;
    vertical-align: middle;
    text-overflow: ellipsis;
}