Angular中Header标签内HTML菜单hover失效问题求助

问题说明 #

Angular应用中header内的HTML菜单hover功能异常，下拉菜单无法覆盖组件内所有控件，菜单UI如下：

以下是当前使用的CSS和HTML代码：

现有CSS代码 #

nav {
      background-color: #4D678D;
    }      
    nav ul {
      padding: 0;
      margin: 0;
      list-style: none;
      position: relative;
    }
    nav ul li {
      display: inline-block;
      background-color: #4D678D;
    }
    nav a {
      display: block;
      padding: 0 15px;
      color: #fff;
      line-height: 50px;
      font-size: 14px !important;
      text-decoration: none;
    }
    /* Hide Dropdown by Default*/
    nav ul ul {
      display: none;
      position: absolute;
      top: 50px;
    }  
    /* hover */
    nav a:hover {
      background-color: #051731;
    }
    /* Display Dropdown on Hover */
    nav ul li:hover>ul {
      display: inherit;
    }
    /* Fisrt Tier Dropdown */
    nav ul ul li {
      width: auto; //170px;
      float: none;
      display: list-item;
      position: relative;
    }
    /* ============ Second, Third and More Tiers ===========*/
    nav ul ul ul li {
      position: relative;
      top: -50px;
      left: auto; //170px;
    }
    /* Change this in order to change the Dropdown symbol */
    li>a::after {
      //content: ' +';
    }
    li>a:only-child::after {
      content: '';
    }

现有HTML模板代码 #

<div id="container">
      <nav>
        <ul>
          <li *ngFor="let item of menuItems">
            <a href="" [routerLink]="item.link" *ngIf="!item.children || item.children.length === 0">{{ item.label }}</a>
            <a href="" [routerLink]="item.link" *ngIf="item.children && item.children.length > 0">{{ item.label }}</a>
            <ul>
              <li *ngFor="let child of item.children">
                <a href="" [routerLink]="child.link" [queryParams]="child.queryParam"
                   *ngIf="child.link !== 'Bug-microsoft-form' && child.link !== 'Feedback' && child.link !== 'UserManual' && child.id==1">
                  {{ child.label }}
                </a>
                <a mat-menu-item [routerLink]="child.link" [queryParams]="child.queryParam"
                   *ngIf="child.link !== 'Bug-microsoft-form' && child.link !== 'Feedback' && child.link !== 'UserManual' && child.id!=1 && userType=='1'">
                  <span>{{ child.label }}</span>
                </a>
                <a mat-menu-item [routerLink]="child.link" [queryParams]="child.queryParam"
                   *ngIf="child.link !== 'Bug-microsoft-form' && child.link !== 'Feedback' && child.link !== 'UserManual' && child.type=='admin'">
                  <span>{{ child.label }}</span>
                </a>
                <a mat-menu-item [routerLink]="child.link" [queryParams]="child.queryParam"
                   *ngIf="child.link !== 'Bug-microsoft-form' && child.link !== 'Feedback' && child.link !== 'UserManual' && child.type=='support'">
                  <span>{{ child.label }}</span>
                </a>
                <a mat-menu-item href="https://forms.office.com/r/qeUj2w9p6L" target="_blank"
                   *ngIf="child.link === 'Bug-microsoft-form' && userType == '0'">
                  <span>{{ child.label }}</span>
                </a>
                <a mat-menu-item href="https://forms.office.com/r/T1Qx1A4geQ" target="_blank" *ngIf="child.link === 'Feedback'">
                  <span>{{ child.label }}</span>
                </a>
                <a href="/assets/fileformat/IMS_UserManual_Vendor_1.pdf" target="_blank" mat-menu-item
                   *ngIf="child.link === 'UserManual'">
                  <span>{{ child.label }}</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>

问题根源与修复步骤 #

1. 下拉菜单层级不足被遮挡 #

当前二级菜单未设置z-index，当页面其他组件有更高层级时，下拉菜单会被覆盖。

修复代码：

/* Hide Dropdown by Default*/
nav ul ul {
  display: none;
  position: absolute;
  top: 50px;
  z-index: 9999; /* 提升层级至最高级 */
}

2. CSS注释语法错误 #

标准CSS不支持//注释（仅预处理器支持），会导致样式解析异常。

修复代码：

/* Fisrt Tier Dropdown */
nav ul ul li {
  width: auto; /* 170px; */
  float: none;
  display: list-item;
  position: relative;
}
/* ============ Second, Third and More Tiers ===========*/
nav ul ul ul li {
  position: relative;
  top: -50px;
  left: auto; /* 170px; */
}
/* Change this in order to change the Dropdown symbol */
li>a::after {
  /* content: ' +'; */
}

3. Hover区域不连贯导致菜单意外收起 #

父li与下拉菜单之间若存在间隙，鼠标移动时会触发菜单收起；同时mat-menu-item的默认样式可能破坏hover区域连续性。

修复代码：

nav ul ul li {
  width: auto; /* 170px; */
  float: none;
  display: list-item;
  position: relative;
  background-color: #4D678D; /* 填充背景色，确保hover区域连续 */
}

/* 统一mat-menu-item样式，避免冲突 */
nav a.mat-menu-item {
  padding: 0 15px;
  line-height: 50px;
  color: #fff;
  text-decoration: none;
  background-color: transparent;
}

4. HTML模板冗余优化 #

重复的*ngIf分支可合并，提升代码可读性：

<div id="container">
  <nav>
    <ul>
      <li *ngFor="let item of menuItems">
        <a href="" [routerLink]="item.link">{{ item.label }}</a>
        <!-- 仅当有子菜单时渲染 -->
        <ul *ngIf="item.children?.length">
          <li *ngFor="let child of item.children">
            <ng-container *ngIf="child.link !== 'Bug-microsoft-form' && child.link !== 'Feedback' && child.link !== 'UserManual'">
              <a 
                [routerLink]="child.link" 
                [queryParams]="child.queryParam"
                [class.mat-menu-item]="child.id !== 1 || child.type || userType === '1'"
              >
                {{ child.label }}
              </a>
            </ng-container>
            <!-- 特殊链接处理 -->
            <a 
              mat-menu-item 
              href="https://forms.office.com/r/qeUj2w9p6L" 
              target="_blank"
              *ngIf="child.link === 'Bug-microsoft-form' && userType === '0'"
            >
              {{ child.label }}
            </a>
            <a 
              mat-menu-item 
              href="https://forms.office.com/r/T1Qx1A4geQ" 
              target="_blank" 
              *ngIf="child.link === 'Feedback'"
            >
              {{ child.label }}
            </a>
            <a 
              href="/assets/fileformat/IMS_UserManual_Vendor_1.pdf" 
              target="_blank" 
              mat-menu-item
              *ngIf="child.link === 'UserManual'"
            >
              {{ child.label }}
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

内容的提问来源于stack exchange，提问作者Kirubha Kavi