你不需要任何Angular 的代码主要为hiding/showing请找到下面的工作示例使用CSS的位置。请让我知道如果有任何疑问！
母

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { MenuComponent } from './menu/menu';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MenuComponent],
  template: `
  <button (click)="buttonClicked($event)">Open Menu</button>
    <app-menu [display]="displayStyle" (menuItemSelected)="displayStyle='none'">
  `,
})
export class App {
  displayStyle = 'none';

  buttonClicked(evt: MouseEvent) {
    evt.stopPropagation();
    if (this.displayStyle === 'block') {
      this.displayStyle = 'none';
    } else {
      this.displayStyle = 'block';
    }
  }
}

bootstrapApplication(App);

字符串
菜单ts

// context-menu.component.ts
import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';

export interface MenuItem {
  label: string;
  position?: any;
  action?: () => void;
  subItems?: MenuItem[];
  showSubMenu?: boolean; // Property to control submenu visibility
}

@Component({
  selector: 'app-menu',
  templateUrl: './menu.html',
  styleUrls: ['./menu.scss'],
  standalone: true,
  imports: [CommonModule],
})
export class MenuComponent {
  @Input() public display = 'none';
  @Output() public menuItemSelected = new EventEmitter<MenuItem>();
  public menuItems: MenuItem[] = [
    { label: 'Option 1', action: () => this.doSomething('Option 1') },
    {
      label: 'Option 2 Mega thing',
      action: () => this.doSomething('Option 2'),
    },
    {
      label: 'Option 3',
      subItems: [
        {
          label: 'Sub Option 1',
          action: () => this.doSomething('Sub Option 1'),
        },
        {
          label: 'Sub Option 2',
          subItems: [
            {
              label: 'Sub-Sub Option 1',
              action: () => this.doSomething('Sub-Sub Option 1'),
            },
          ],
        },
      ],
    },
  ];

  public onMenuItemClick(event: MouseEvent, item: MenuItem): void {
    this.menuItemSelected.emit(item);
  }

  private doSomething(what: string): void {
    console.log(what);
  }
}

型
菜单html

<ng-template
  #recursiveMenu
  let-menuItems="menuItems"
  let-root="root"
  let-display="display"
>
  <div
    class="context-menu"
    [ngClass]="{'child' : !root }"
    [style.display]="display"
  >
    <ul [ngClass]="{'child' : !root }">
      <li
        *ngFor="let item of menuItems"
        (click)="onMenuItemClick($event, item)"
        style="position: relative"
      >
        {{ item.label }}
        <i
          class="expand-icon"
          *ngIf="item.subItems && item.subItems.length > 0 "
        ></i>
        <ng-container *ngIf="item.subItems && item.subItems.length > 0 ">
          <div
            [ngTemplateOutlet]="recursiveMenu"
            [ngTemplateOutletContext]="{menuItems: item.subItems, position: item.position }"
          ></div>
        </ng-container>
      </li>
    </ul>
  </div>
</ng-template>
<div
  [ngTemplateOutlet]="recursiveMenu"
  [ngTemplateOutletContext]="{menuItems: menuItems, root: true, display: display || 'block'}"
></div>

型
菜单scss

.context-menu ul {
  position: absolute;
  z-index: 1000;
  min-width: 150px;
  background-color: white;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  padding: 0;
  margin: 0;
  list-style: none;
  list-style-type: none;
}

.context-menu ul li {
  position: relative;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #fff;
}

.context-menu ul li:hover {
  background-color: #f1f1f1;
}

.expand-icon {
  font-size: 1.2em;
  font-weight: bold;
  float: right;
}

.child {
  position: absolute;
  left: 100%;
  top: 0px;
}
.context-menu.child {
  display: none;
}
li:hover > .context-menu.child {
  display: inline;
}

型
stackblitz