the of navbar drop down menu hiding behind card and fillters

Issue

i am beginner so I am trying to make a website for just learning the language that was been used is Javascript and faced this problem that dropdown menu hiding behind cards and the filter, any one faced the same problem ? and this is the pics

any help ?

enter image description here

.dropdown-toggle {
  cursor: pointer;
}

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <ng-template #anonymousUser>
          <li *ngIf="auth.user" class="nav-item">
            <a class="nav-link" href="login">login</a>
          </li>
        </ng-template>
        <li
          *ngIf="auth.user | async as user; else anonymousUser"
          ngbDropdown
          class="nav-item dropdown"
        >
          <a
            ngbDropdownToggle
            class="nav-link dropdown-toggle"
            id="navbarDropdown"
            role="button"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            {{ user.displayName }}
          </a>
          <ul
            ngbDropdownMenu
            class="dropdown-menu"
            aria-labelledby="navbarDropdown"
          >
            <li>
              <a
                class="dropdown-item"
                href="dashboard"
                aria-labelledby="dropdownMenuButton"
                >Dashboard</a
              >
            </li>
            <li>
              <a class="dropdown-item" routerLink="admin/products">Products</a>
            </li>
            <li>
              <a class="dropdown-item" routerLink="admin/publish">publish</a>
            </li>
            <li>
              <a (click)="logout()" class="dropdown-item" href="home">logout</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Solution

Try increasing the z-index of the dropdown-menu Like this,

.dropdown-menu{
    z-index: 2000 !important;
}

Answered By - USAMA REHMAN YOUSAF