Display Div on top of Kendo Grid - css

Question

I am using Kendo Grid to display Grid view of data. I have a column with button that, when clicked, shows a list of options on top of the page and left to the button.
I am not using Kendo Popup or context menu, but just using ng-template with structural directive logic.
What i look for?
What i get?
This is my Kendo grid column:
<div style="position: relative">
<kendo-grid>
...
<kendo-grid-column title="SAMPLE">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<div class="context-dropdown-menu" *ngIf="showIndex === rowIndex && showDialog" style="position: absolute;">
<ul>
<li> <i class="fa fa-envelope"></i> Item2.1 </li>
<li> <i class="fa fa-envelope"></i> Item2.2 </li>
<li> <i class="fa fa-envelope"></i> Item2.3 </li>
</ul>
<div>
<button type="button" (click)="clicked(rowIndex)"> Click </button>
</ng-template>
</kendo-grid-column>
...
</kendo-grid>
</div>
Thanks in advance!

Answer 1

Replace below style in your stackblitz example it will work fine.
.context-dropdown-menu {
margin: 0 -10.75rem;
padding: 0px;
width: 170px;
z-index: 999999;
}
.context-dropdown-menu ul {
margin: 0px;
padding: 0px;
list-style: none;
background: #e4e4e4
}
.context-dropdown-menu ul li {
font-size: 13px;
padding: 7px 10px;
border-bottom: 1px solid #efefef;
color: #617189;
cursor: pointer;
}
.context-dropdown-menu ul li:hover {
background: #f5f5f5;
}