I've been diligently working on my project for about a week now, but I've encountered a small yet incredibly frustrating issue that has me stumped. The problem lies in the functionality of the responsive sidemenu with multiple dropdowns that I have created. Ideally, these dropdowns should open like columns; however, upon opening them for the first time, they initially expand horizontally before stacking on top of each other. Despite my efforts to rectify this by adjusting the width of the columns, I have had no success so far. It's worth noting that I am utilizing Bootstrap 5 for the entire structural build.
<div class="col-auto">
<div class="container-fluid" style="padding: 0">
<div class="row" style="margin-right: 0">
<div class="d-flex flex-column justify-content-between bg-body-tertiary col-auto min-vh-100" style="padding-right: 0">
<div class="mt-4">
<!-- düzeltilecek alan başlangıç -->
<ul class="nav nav-pills flex-column mt-2 mt-sm-0" id="menu">
<li class="nav-item my-sm-1 my-2">
<a class="nav-link text-center text-sm-start" href="#menu1" data-bs-toggle="collapse" aria-expanded="false">
<i class="fa fa-square-plus"></i>
<span class="ms-2 d-none d-sm-inline">Ana Menü</span>
</a>
<ul class="nav collapse ms-1 flex-column" id="menu1" data-bs-parent="#menu">
<li class="nav-item">
<a href="" class="nav-link" aria-current="page">Öge 1</a>
</li>
<li class="nav-item">
<a href="" class="nav-link" aria-current="page">Öge 2</a>
</li>
</ul>
</li>
<li class="nav-item my-sm-1 my-2">
<a class="nav-link text-center text-sm-start" href="#menu2" data-bs-toggle="collapse">
<i class="fa fa-gear"></i>
<span class="ms-2 d-none d-sm-inline">Seçenek-1</span>
</a>
<ul class="nav collapse ms-1 flex-column" id="menu2" data-bs-parent="#menu">
<li class="nav-item">
<a href="" class="nav-link" aria-current="page">Öge 1</a>
</li>
<li class="nav-item">
<a href="" class="nav-link" aria-current="page">Öge 2</a>
</li>
</ul>
</li>
<li class="nav-item my-sm-1 my-2">
<a class="nav-link text-center text-sm-start" href="#menu3" data-bs-toggle="collapse">
<i class="fa fa-gear"></i>
<span class="ms-2 d-none d-sm-inline">Seçenek-2</span>
</a>
<ul class="nav collapse ms-1 flex-column" id="menu3" data-bs-parent="#menu">
<li class="nav-item">
<a href="" class="nav-link" aria-current="page">Öge 1</a>
</li>
<li class="nav-item">
<a href="" class="nav-link" aria-current="page">>Öge 2</a>
</li>
</ul>
</li>
<li class="nav-item my-sm-1 my-2">
<a class="nav-link text-center text-sm-start" href="#menu4" data-bs-toggle="collapse">
<i class="fa fa-gear"~></i>
<span class="ms-2 d-none d-sm-inline">Seçenek-3</span>"
</a>
<ul "class="nav collapse ms-1 flex-column">
<li class="nav-item">
<a href="" class="nav-link">Öge 1</a>
</li>
<li class="nav-item">
<a href="" class="nav-link"">Öge 2</a>";
</li>
</ul>
<!-- düzeltilecek alan bitiş -->
</li>
</ul>
</div>
</div>
</div>
</div>
</div>