My html menu inside header tag is not properly hovering in angular, kindly guide me

Question

Below is my CSS used in Angular application, menu is not hovering over all the controls in the angular component

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

We can use the CSS property z-index to show the dropdown above all elements by setting a higher z-index than the other elements, I am doing this by add the CSS class display-over-all and setting the z-index with !important, hopefully it solves your issue!

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">
         ...

stackblitz