Sub Menu not displaying properly on Horizontal Menu

Im planning to create a horizontal menu with sub menus for reference here is the look currently



on mobile this is the look



My problem here is the Horizontal Main Menu when it has to many links it has to be scroll like this



The gray part is the scroll. Now my problem here is when I open a sub menu this is the output



How can I fix it like it is still scrollable and no issues on opening the sub menu. Here is my code

<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="assets/icons/bm-logo.png" alt="" width="30" height="30" class="d-inline-block align-text-top">
<span class="man-semi font-size-14"> Brilliant Mind HR System</span>
</a>
<div class="d-flex">
<div class="dropdown">
<img src="assets/icons/default-profile.png" alt="My Profile" width="30" height="30" class="circle-img create-pointer" (click)="toggleProfileMenu()">
<ul class="dropdown-menu font-size-12" [class.show]="showProfileMenu">
<li class="margin-left-16">
<span>
<span class="badge text-bg-secondary ">Account</span>
<br>
Paul Edward Pagente
</span>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<button class="dropdown-item" type="button" (click)="removeCurrentHeaderMenuSelected()">Profile</button>
</li>
<li>
<button class="dropdown-item" type="button">Logout</button>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="menu-container font-size-12">
<div class="menu-container-item border-right-1-ccc">
<div class="margin-left-10 margin-right-10">
<i class="bi bi-grid-3x3-gap-fill"></i>
<span class="margin-left-10 font-w-600 font-size-12">System Menu</span>
</div>
</div>
<div
*ngFor="let currentHeaderMenu of populateHeaderMenus(); let currentHeaderMenuIndex = index"
class="menu-container-item create-pointer border-right-1-ccc"
[class.border-bottom-selected]="currentHeaderMenu.isSelected"
(click)="changeSelectedHeaderMenu(currentHeaderMenuIndex)"
>
<div class="dropdown">
<div class="margin-left-10 margin-right-10">
<span class="font-size-12">{{ currentHeaderMenu.title }}</span>
</div>
<ng-container *ngIf="currentHeaderMenu.childLink.length !== 0">
<ul class="dropdown-menu font-size-12" [class.show]="currentHeaderMenu.isSubMenuOpen">
<ng-container *ngFor="let childLink of currentHeaderMenu.childLink; let currentChildLinkIndex = index">
<li>
<button
class="dropdown-item"
type="button"
(click)="openLinkFromChildMenu(currentHeaderMenuIndex,currentChildLinkIndex)"
>
{{ childLink.title }}
</button>
</li>
</ng-container>
</ul>
</ng-container>
</div>
</div>
</div>


<app-header></app-header>
<div class="container-fluid mt-2">
<router-outlet></router-outlet>
</div>


Here is the CSS

.title {
font-size: 13px;
position: absolute;
margin-top: 5px;
margin-left: 5px;
}

.circle-img {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
object-fit: cover;
border: 1px solid #8B8B8B;
}

.menu-container {
border: 1px solid #ccc;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
height: 50px;
white-space: nowrap;
background-color: #F8F9FA;
box-shadow: 0 2px 4px rgba(57, 2, 2, 0.05);
}

.menu-container-item {
padding: 8px;
text-align: center;
flex-shrink: 0;
}

.menu-container-icon {
display: inline-flex;
vertical-align: top;
}

.border-bottom-selected {
border-bottom: 4px solid #244DC9;
}


How can I achieve my desired output? Im am using bootstrap 5

Continue reading...