角度材料下拉菜单不会关闭

Question

我正在使用角度材质创建菜单组件，某些菜单项具有子菜单，并且正在使用 （mouseover）=“ menuTrigger.openMenu（）” 打开下拉列表。

<div class="row">
  <div class="col-xl-12 widget-29">
    <div class="widget no-bg ">
      <div class="widget-body pt-0">
        <div id="services" class="owl-carousel ">

          <a [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" (mouseover)="menuTrigger.openMenu()" class="item has-shadow">
            <div class="devices-item d-flex justify-content-center align-items-center">
              <div class="room">{{'menu.reclamations' | translate}}</div>
            </div>
            <img id="rec" class="img-fluid" src="assets/img/smarthome/plaint.png" alt="...">
          </a>

          <a [matMenuTriggerFor]="menuu" #menuTriggerr="matMenuTrigger" (mouseover)="menuTriggerr.openMenu()" class="item has-shadow" [routerLink]="['/propositions/all']">
            <div class="devices-item d-flex justify-content-center align-items-center">
              <div class="room">{{'menu.propositions' | translate}}</div>
            </div>
            <img class="img-fluid" id="prop" src="assets/img/smarthome/feedback.png" alt="...">
          </a>

          <a [matMenuTriggerFor]="menuuu" #menuTriggerrr="matMenuTrigger" (mouseover)="menuTriggerrr.openMenu()" class="item has-shadow" [routerLink]="['/sondages/own']">
            <div class="devices-item d-flex justify-content-center align-items-center">
              <div class="room">{{'menu.participations' | translate}}</div>
            </div>
            <img class="img-fluid" id="review" src="assets/img/smarthome/review.png" alt="...">
          </a>

          <a class="item has-shadow" [routerLink]="['/documents']">
            <div class="devices-item d-flex justify-content-center align-items-center">
              <div class="room">{{'menu.documents' | translate}}</div>
            </div>
            <img class="img-fluid" src="assets/img/smarthome/file-search.png" alt="...">
          </a>

          <a class="item has-shadow" data-toggle="modal" data-target="#download">
            <div class="devices-item d-flex justify-content-center align-items-center">
              <div class="room">{{'menu.appmobiles' | translate}}</div>
            </div>
            <img class="img-fluid" id="mobile" src="assets/img/smarthome/smartphone.png" alt="...">
          </a>

          <a class="item has-shadow" [routerLink]="['/renseignement']">
            <div class="devices-item d-flex justify-content-center align-items-center">
              <div class="room">{{'menu.renseignements' | translate}}</div>
            </div>
            <img class="img-fluid" id="faq" src="assets/img/smarthome/faq.png" alt="...">
          </a>

          <a class="item has-shadow" [routerLink]="['/members']">
            <div class="devices-item d-flex justify-content-center align-items-center">
              <div class="room">{{'menu.lacommune' | translate}}</div>
            </div>
            <img class="img-fluid" src="assets/img/smarthome/building.png" alt="...">
          </a>

        </div>
      </div>
    </div>
  </div>

  <mat-menu #menu="matMenu" class="dropdown" id="down">
    <button class="dropdown-item" [routerLink]="['/plaintes/new']">
      <span><i class="la la-plus-circle la-2x"></i> Nouvelle réclamation</span>
    </button>
    <button class="dropdown-item" [routerLink]="['/plaintes/all']">
      <span><i class="la la-eye la-2x"></i> Mes réclamations</span>
    </button>
  </mat-menu>

  <mat-menu #menuu="matMenu" class="dropdown" id="down">
    <button class="dropdown-item" [routerLink]="['/plaintes/new']">
      <span><i class="la la-plus-circle la-2x"></i>Nouvelle proposition</span>
    </button>
    <button class="dropdown-item" [routerLink]="['/plaintes/all']">
      <span><i class="la la-eye la-2x"></i> Mes propositions</span>
    </button>
  </mat-menu>

  <mat-menu #menuuu="matMenu" [overlapTrigger]="false" class="dropdown" id="down">
    <button class="dropdown-item" [routerLink]="['/plaintes/new']">
      <span><i class="la la-plus-circle la-2x"></i> participation</span>
    </button>
    <button class="dropdown-item" [routerLink]="['/sondages/own']">
      <span><i class="la la-eye la-2x"></i> mes participations</span>
    </button>
  </mat-menu>

</div>

---

当鼠标悬停在菜单项上时，下拉菜单将打开，但此后将不会关闭！甚至我使用 （mouseleave）=“ menuTrigger.closeMenu（）” 子菜单都会同时出现和消失！！！