在Kendo UI网格单元格中对齐弹出窗口

Question

我正在尝试为一个列提供一个下拉类型元素的模板（请注意，它不是下拉列表。如果是这样，我会使用Kendo下拉列表。）

列模板是这样的：

  template:function(rec) {
    var str = '<div style="background:red;position:relative;">'
        + rec.Country +
        '<div style="width:100%;position:absolute;top:10px;left:0px;z-index:9999;background-color:green;display:inline-block;">' +
        '<ul>' +
            '<li>Mexico</li>' +
            '<li>Germany</li>' +
            '<li>UK</li>' +
            '<li>Spain</li>' +
        '</ul>' +
        '</div>'
    '</div>';
    return str;
}

有两个div标记，其中第一个标记位于relative，而子div位于absolute父标记div。 这里的问题是，虽然div被设置为某个最大值，但是TD列表被隐藏在Kendo-UI网格的z-index标记内。

但是同样的代码在普通的普通html表中工作正常。问题出在Kendo Grid上。

有人可以提供帮助。 这是kendo网格示例的jsbin和普通html表的jsbin。