How to add drop-down menus to an existing navbar menu?

This is my current navbar

I want to have the look of the first with the drop-down feature of the second. How can this be done?

<nav class="bg-light border navbar navbar-expand-md navbar-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="/"><span class="blue">C</span><span class="red">$</span><span 
      class="yellow">5</span><span class="green">0</span> <span class="red">Finance</span></a>
    <button aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"
      class="navbar-toggler" data-bs-target="#navbar" data-bs-toggle="collapse" type="button">
      <span class="navbar-toggler-icon"></span>
      <button>
          <div class="collapse navbar-collapse" id="navbar">
          {% if session["user_id"] %}
              <ul class="navbar-nav me-auto mt-2">
                  <li class="nav-item"><a class="nav-link" href="/quote">Quote</a></li>
                  <li class="nav-item"><a class="nav-link" href="/buy">Buy</a></li>
                  <li class="nav-item"><a class="nav-link" href="/sell">Sell</a></li>
                  <li class="nav-item"><a class="nav-link" href="/history">History</a></li>
              </ul>
              <ul class="navbar-nav ms-auto mt-2">
                  <li class="nav-item"><a class="nav-link" href="/logout">Log Out</a></li>
              </ul>
          {% else %}
             <ul class="navbar-nav ms-auto mt-2">
                <li class="nav-item"><a class="nav-link" href="/register">Register</a></li>
                <li class="nav-item"><a class="nav-link" href="/login">Log In</a></li>
             </ul>
          {% endif %}
       </div>
    </div>
</nav>

Here is code I found to make a drop-down menu:

<ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Page 1-1</a></li>
      <li><a href="#">Page 1-2</a></li>
      <li><a href="#">Page 1-3</a></li>
    </ul>
  </li>
  <li><a href="#">Page 2</a></li>
  <li><a href="#">Page 3</a></li>
</ul>

Answer

<ul class="nav navbar-nav navbar-right"> {% if session["user_id"] %}
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            Menu displayed to the logged in<span class="caret"></span> </a>
        <ul class="dropdown-menu">
            <li><a href="/page-1">page-1</a></li>
            <li><a href="/page-2">page-2</a></li>
            <li role="separator" class="divider"></li> <li><a href="/logout">Log Out</a></li>
        </ul>
    </li>
{% else %}
    <li><a href="/reg-page">reg-page</a></li>
    <li><a href="/log-page">log-page</a></li>
{% endif %}
</ul>

or do the opposite. All you have to do is wrap the bootstrap menu code with the session control code.