css - 将 traingle 放在垫子菜单的顶部

Question

我的菜单如下。我如何将一个三角形向上放到我的下拉菜单中。

  <button mat-icon-button [matMenuTriggerFor]="appMenu">
    <mat-icon>arrow_drop_down</mat-icon>
  </button>

  <mat-menu #appMenu="matMenu">
    <button mat-menu-item [matMenuTriggerFor]="subMenu"><span translate="">header.menu.language</span></button>
  </mat-menu>

  <mat-menu #subMenu="matMenu">
    <button mat-menu-item *ngFor="let language of languages" (click)="setLanguage(language)">{{ language }}</button>
  </mat-menu>

当前外观

我想

我在 div 中添加了以下 css 和封闭的 mat-menu 与 css 但不工作。

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;

  border-bottom: 5px solid black;
}

Answer 1

更新代码

.submenu                            { position: relative;}
.submenu:after                      { position: absolute; content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid black; left: 20px; bottom: 110%; }

<button mat-icon-button [matMenuTriggerFor]="appMenu">
    <mat-icon>arrow_drop_down</mat-icon>
  </button>

  <mat-menu #appMenu="matMenu">
    <button mat-menu-item [matMenuTriggerFor]="subMenu" class="submenu"><span translate="">header.menu.language</span></button>
  </mat-menu>

  <mat-menu #subMenu="matMenu">
    <button mat-menu-item *ngFor="let language of languages" (click)="setLanguage(language)" class="submenu" >{{ language }}</button>
  </mat-menu>

Answer 2

实际上，您可以制作该三角形，但该点是根据高度mat-menu随机打开的，因此如果您添加该点并且当您调整窗口大小或在选项卡上或在小型 Mac 设备上它向上打开并且您的点在这种情况下意义较小。简而言之，您不能每次都在底部打开，以便箭头按您的意愿指向上方。positionview-portmat-menu

最好的解决方案是尝试使用mat-menu默认样式。