the of navbar drop down menu hiding behind card and fillters

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>

Continue reading...