Css 角度动态菜单和子菜单样式

伙计们，我有动态导航栏。如果菜单有子菜单，子菜单将可用。我想在悬停的相关菜单下打开子菜单，并想保持子菜单可见以选择他们的项目。 使用此代码时，子菜单将始终显示在css样式的位置，当我的鼠标移动到它时，菜单将消失。。。我如何解决这个问题

这是我的导航栏：

<nav>
  <div class="nav-wrapper grey darken-3">
    <ul class="right hide-on-med-and-down second-nav">
      <li *ngFor="let cat of categories">
        <a (mouseover)="hover($event, cat)" (mouseleave)="unhover($event)" class="dropdown-button" >{{ cat.title }}</a>
      </li>
    </ul>
  </div>
</nav>
<!-- Dropdown -->
<div *ngIf="hoveredCategory" class="content">
  <ul id="hoveredCategory" class="collection">
    <li class="collection-item avatar" *ngFor="let sc of hoveredCategory.sub">
      <span>
        {{ sc }}
      </span>
    </li>
  </ul>
</div>

悬停并取消悬停：

  hover(event, category) {
    this.hoveredCategory = category;
  }

  unhover(event) {
    this.hoveredCategory = null;

  }

.navigation ul、.navigation li{
列表样式：无；
保证金：0；
填充：0；
浮动：左；
}
李先生{
背景：rgba（0,0,0,0.3）；
位置：相对位置；
}
.李娜{
填充：15px；
显示：块；
文字装饰：无；
}
.导航{
显示：无；
位置：绝对位置；
最高：100%；
左：0；
}
.导航李：悬停ul{
显示：块；
}

您可以使用简单的css来完成

  hover(event, category) {
    this.hoveredCategory = category;
  }

  unhover(event) {
    this.hoveredCategory = null;

  }