How to make a hover menu in angular?

I am trying to make a hover menu, here is my code

html:

<div class="hover-container">
    <div class="hover-bar">
        <div (mouseenter)="show()" (mouseleave)="hideOnTime()">show</div>
    </div>

    <div (mouseenter)="show()" (mouseleave)="hide()" *ngIf='isShow' #content class="content-container">
    1
    1
    1 
    </div>
</div>

css:

div.hover-container{
  position: relative;
}

div.hover-bar{
  display:flex;
  flex-direction: column;
}


div.content-container{
  z-index:99;
  position:absolute;
  background-color: pink;
  width:100%;
  height:300px;
}

and the component:

@Component({
  selector: 'app-dropdown-menu',
  templateUrl: './dropdown-menu.component.html',
  styleUrls: ['./dropdown-menu.component.css'],
})
export class HoverMenuComponent implements OnInit {
  @ViewChild('content') content?: ElementRef;
  isShow: boolean = false;

  constructor() {}

  ngOnInit(): void {}

  show(): void {
    this.isShow = true;
  }

  hide(): void {
    this.isShow = false;
  }

}

How can I move from the hover-bar to the content and keep the content show up?

Or using other method like observable is better than mouseenter & mouseleave?