Как показать и скрыть Mat-меню при наведении и наведении курсора, используя angular 7

Question

Я использую Angular материал для разработки меню панели навигации

<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>        
        </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 но не работает, подменю исчезают только при нажатии вне div