我需要将下拉按钮链接下拉（锚标记）和导航后，点击一个特定的下拉选项。在Angular 。
这是我的导航栏。导航栏css属性没有正确分配（当我悬停在此按钮上时，蓝色下划线没有显示）
我使用了角形材料（Mat Button组件）。

.matButton
{
   outline: none; 
   box-shadow:none;
   font-size: 25px;
   color:#c9ced1;
   font-weight: normal;
   background-color: #46484a;
}

.navbar {
  background-color: #333;
  overflow: hidden;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-bottom: 3px solid transparent;
}

.navbar a:hover {
  border-bottom: 3px solid rgb(70, 172, 219);
}

.navbar a.active {
  border-bottom: 3px solid rgb(70, 172, 219);
}

<div id="app">
  <nav class="navbar navbar-expand navbar-light" style="background-color:white">
    <ul class="navbar-nav mr-auto" routerLinkActive="active">
      <li class="nav-item" *ngIf="isLoggedIn && showAdminBoard">
        <a href="/catalog" class="nav-link" routerLink="catalog" >
          <div class="Nav-text-size">Catalog</div>
        </a>
      </li>
      <li class="nav-item" *ngIf="isLoggedIn && showAdminBoard">
        <a href="/admin" class="nav-link" routerLink="admin">
          <div class="Nav-text-size">Data Portal</div>
        </a>
      </li>
      <li class="nav-item" *ngIf="isLoggedIn && !showAdminBoard">
        <a href="/user" class="nav-link" routerLink="user">
          <div class="Nav-text-size">Data Portal</div>
        </a>
      </li>
      <li class="nav-item" *ngIf="isLoggedIn">
        <button mat-menu-item class="customize" [matMenuTriggerFor]="appMenu">Canary Access</button>
        <mat-menu #appMenu="matMenu">
          <a mat-menu-item href="/pendingasks" routerLink="canarypendingasks"><b>Pending</b></a>
          <a mat-menu-item href="/granted" routerLink="canarygrantedasks"><b>Granted</b></a>
        </mat-menu>
      </li>
      <li class="nav-item" *ngIf="isLoggedIn && showAdminBoard">
        <a href="/s3bucketlists" class="nav-link" routerLink="s3buckets">
          <div class="Nav-text-size">S3Bucket Access</div>
        </a>
      </li>
      <li class="nav-item" *ngIf="isLoggedIn && showAdminBoard">
        <a href="/requestsadmin" class="nav-link" routerLink="requestsadmin">
          <div class="Nav-text-size">Admin</div>
        </a>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto" *ngIf="!isLoggedIn">
      &nbsp;
      &nbsp;
      <li class="nav-item">
        <button type="button" class="btn btn-outline-primary" (click)="login()">Login</button>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto" *ngIf="isLoggedIn">
      <li class="nav-item">
        <a href="/home" class="nav-link" routerLink="user">
          <div class="Nav-text-size">Hi &nbsp;{{ username }}&nbsp;&nbsp;&nbsp;</div>
        </a>
      </li>
      <li class="nav-item">
        <button type="button" class="btn btn-outline-danger btn-lg" (click)="logout()">Logout</button>
      </li>
    </ul>
  </nav>
  <!-- <hr class="line"> -->
  <div>
    <router-outlet></router-outlet>
  </div>
</div>

我试过这个。

<li class="nav-item" *ngIf="isLoggedIn">
        <button mat-menu-item [matMenuTriggerFor]="appMenu">Canary Access</button>
        <mat-menu #appMenu="matMenu">
          <a mat-menu-item href="/pendingasks" routerLink="canarypendingasks"><b>Pending</b></a>
          <a mat-menu-item href="/granted" routerLink="canarygrantedasks"><b>Granted</b></a>
        </mat-menu>
</li>

image 1
image 2
如果我悬停在其他导航栏选项，蓝线会出现。它不仅仅出现在金丝雀通道上，因为那是一个按钮。其他三个是锚标签。
帮助我将此按钮转换为定位标记。
image 3