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 >
  <div >
    <a  href="#">Navbar</a>
    <button
      
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span ></span>
    </button>
    <div  id="navbarSupportedContent">
      <ul >
        <li >
          <a  aria-current="page" href="#">Home</a>
        </li>
        <ng-template #anonymousUser>
          <li *ngIf="auth.user" >
            <a  href="login">login</a>
          </li>
        </ng-template>
        <li
          *ngIf="auth.user | async as user; else anonymousUser"
          ngbDropdown
          
        >
          <a
            ngbDropdownToggle
            
            id="navbarDropdown"
            role="button"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            {{ user.displayName }}
          </a>
          <ul
            ngbDropdownMenu
            
            aria-labelledby="navbarDropdown"
          >
            <li>
              <a
                
                href="dashboard"
                aria-labelledby="dropdownMenuButton"
                >Dashboard</a
              >
            </li>
            <li>
              <a  routerLink="admin/products">Products</a>
            </li>
            <li>
              <a  routerLink="admin/publish">publish</a>
            </li>
            <li>
              <a (click)="logout()"  href="home">logout</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

CodePudding user response：

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

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

CodePudding user response：

You are facing this issue due to z-index. If you want to display the drop-down menu at the front then you can increase it's z-index so that it won't hide behind any cards. Make sure that z-index is greater than any other element which might hide the drop-down menu. You can read more about it here.