I started learning Bootstrap this week and encountered a problem with the dropdown menu. I want it to float outside of my navbar, but it’s stuck. I’ve tried various methods, yet nothing has worked.

Here’s the code:

Home
Contact
• About

Books

• Action
• Another action
• Something else here

<li style="margin-right: 20px; margin-left: 20px;"><a href="index.html">Home</a></li>
<li style="margin-right: 20px;"><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<div class="dropdown">
  <button style="margin-bottom: 30px; background-color: #1e1bc0; border: none; color: white; padding: 15px 32px; text-align:
    center; text-decoration: none;display: inline-block;font-size: 16px; " class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Books
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="book.html">Action</a></li>
    <li><a class="dropdown-item" href="book.html">Another action</a></li>
    <li><a class="dropdown-item" href="book.html">Something else here</a></li>
  </ul>

</div>

I tried using bootstrap links but still facing the same problem and need someone review/appraise my code and explain the problem.

here’s the picture of the problem