Bootstrap 5, dropdown button issue - html

Question

hope you're well! I am having a problem with this navbar, basically, I added a dropdown button inside the navbar but once I click the arrow to get the button collapse Its look like is collapsing behind the "body" so it doesn't show properly. in attachment the picture. and this is my code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navbar"> <!--this wrap all the navbar-->
<div class="container-fluid"> <!--this class provides a responsive fixed width container-->
<!-- this code is to add symbols using bootstrap icon library -->
<a class="navbar-brand" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclude" viewBox="0 0 16 16">
<path d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm12 2H5a1 1 0 0 0-1 1v7h7a1 1 0 0 0 1-1V4z"/>
</svg>
<!-- end symbol -->
VRQ: Vincenzo's Random "Quotes"</a>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle btn-sm" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div> <!--div container of all the buttons-->
<button class="btn btn-secondary " type="button" style="width:150px" id="btncontactme">Contact Me</button>
<button class="btn btn-secondary " type="button" id="btnsignup">Sign Up </button>
<button class="btn btn-secondary " type="button" id="btnlogin">Log In</button>
</div>
</div>
</nav>
<!-- END NAVBAR -->
thank you in advance for the answers