Polymer Paper Menu not displaying properly over Data Grid / Table

Question

I am showing a paper menu (Dart-Polymer Element) whenever a user clicks a menu button inside of a BWU Datagrid which is a Dart port of SlickGrid. The elements behind the menu still show and the user can actually click items behind the menu.

Here's an image of the problem to give you a better idea:

Here's my CSS changes to for the popup menu:

/* dropdown menu */
cr-table /deep/ a {
  width: 40px;
  overflow: auto;
  display: inline-block;
  text-overflow: ellipsis;
  vertical-align: middle;
}    
/** Pretty transition for showing the menu button */
cr-table /deep/ div.bwu-datagrid-row paper-menu-button.menu-button {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.3s,opacity 0.3s linear;
}
cr-table /deep/ div.bwu-datagrid-row:HOVER paper-menu-button.menu-button {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

Note:

• Keep in mind the table is a Dart Polymer element which uses a BWU-DataGrid.
• The "a" element is the text inside the Product cells.
• CR-Table is just a wrapper for a BWU-DataGrid

Answer 1

Set the BWU DataGrid's cells z-index to a value greater than 1, but less than the z-index of the actual paper menu (which has a default of 12).

cr-table /deep/ div.bwu-datagrid-cell {
    z-index: 2;
}