我的标题标签内的 html 菜单未正确悬停在角度上，请指导我

Question

下面是我在 Angular 应用程序中使用的 CSS，菜单没有悬停在 Angular 组件中的所有控件上

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>

Answer 1

我们可以使用 CSS 属性

z-index

通过设置比其他元素更高的 z-index 来在所有元素上方显示下拉列表，我通过添加 CSS 类

display-over-all

并使用

!important 设置 z-index 来实现此目的

，希望它能解决您的问题！

CSS

.display-over-all {
  z-index: 3000 !important;
}

HTML

    ...
    <a
      href=""
      [routerLink]="item.link"
      *ngIf="item.children && item.children.length > 0"
      >{{ item.label }}</a
    >
    <ul class="display-over-all"> <!-- CSS class added here -->
      <li *ngFor="let child of item.children">
         ...

堆栈闪电战