垫子菜单按钮在垫子表内彼此叠置

Question

我正在使用垫子桌子。我的工作是加载和修改数据（删除，添加，排序）。我的方法是在标题和第一列上使用mat-menu，但是所有mat-menu按钮都堆叠在一起。我认为这与表格样式有关，但我不确定。

我尝试过使用这种样式，但是在Sass方面我不是专家。

这是我的表格HTML

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <!-- an extra columnm for row editing buttons : required adding a new header -> "actions" -->
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let row; let rIndex = index;">
        <button mat-button [matMenuTriggerFor]="menu" yPosition="below">
          <mat-icon>arrow_drop_down_circle</mat-icon>
        </button>
        <mat-menu #menu="matMenu">
          <button mat-icon-button matToolTip="Delete Row" matTooltipPosition="above" (click)="deleteRow(rIndex)">
            <mat-icon>delete</mat-icon>
            <span>Delete Header</span>
          </button>
          <button mat-icon-button matToolTip="Add Header to the left" matTooltipPosition="above"
            (click)="addRowToTheLeft(rIndex)">
            <mat-icon>add_circle</mat-icon>
            <span>Add Left Header</span>
          </button>
          <button mat-icon-button matToolTip="Add Header to the left" matTooltipPosition="above"
            (click)="addRowToTheRight(rIndex)">
            <mat-icon>add_circle</mat-icon>
            <span>Add Right Header</span>
          </button>
        </mat-menu>
        <button mat-icon-button matToolTip="Select Row" matTooltipPosition="above" (click)="selectRow(i)">
          <mat-icon>check_box_outline_blank</mat-icon>
        </button>
      </td>
    </ng-container>
  </table>

这是它的外观图： https://imgur.com/nP6bX5v

预期结果是按钮应该位于彼此下方