how i can have a container in dropdown navbar? - html

Question

I want to create a navbar like this site: digikala.com
my problem is when the mouse goes on menu item drop-down on mouse hover and open a container for all links to show in right
I want to know how I can have a container like this site?
I use bootstrap 4.6 in this page
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" style="color: purple;" href="#">Partineh</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<!-- <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> -->
<li class="nav-item">
<div class="dropdown">
<button class="btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<h5>دسته بندی کالاها</h5>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="menu-grid">
<div class="btn-group dropleft">
<button type="button" class="btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<div class="btn-group dropleft">
<button type="button" class="btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft1
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<div class="container">
<div class="row">
<div class="col-12">
<button class="dropdown-item" type="button">Action1</button>
<button class="dropdown-item" type="button">Another action1</button>
<button class="dropdown-item" type="button">Something else here1</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">سوپرمارکت</a>
</li>
</ul>
</div>
</nav>