How do i make my drop down menu visible beyond the navbar?

I'm trying to have a drop down menu within a navbar; however, it only displays until the limit of my navbar when, ideally, id like it to be "in front" of the navbar so to speak.

Dropdown is cut off

I am new to html and CSS so my exploration is somewhat limited. I have implemented one of bootstrap's navbar's and also used their dropdown button html. I expected this to work okay but, as stated, the dropdown seems to be bound within the navbar (assuming this is because it is within the navbar div?) I have also attempted to follow w3schools guide but I didn't succeed with that either.

Sidenote: because of the limited visibility, the "my account" button logs the user out, this is intentional for now lmao.

<body>      
    <nav class="navbar navbar-expand-lg bg-light">
        <div class="container-fluid">
        <a class="logo" href="/"><img src="static/Logo_2.png" alt="Logo"></a>
        <div class="navbar-nav">
            {% if not session["id"] %}
                <a class="nav-link" href="login">Log In</a>
            {% endif %}
            {% if session["id"] %}
                <a class="nav-link" href="languages">Languages</a>
                <a class="nav-link" href="faq">FAQs</a>
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                        Account
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                        <li><a class="dropdown-item" href="logout">My Account</a></li>
                        <li><a class="dropdown-item" href="logout">Log Out</a></li>
                    </ul>
                    </div>
            {% endif %}
        </div>
        </div>
    </nav>

    {% if get_flashed_messages() %}
        <header>
            <div class="alert alert-primary mb-0 text-center" role="alert">
                {{ get_flashed_messages() | join(" ") }}
            </div>
        </header>
    {% endif %}

    <main class="container-fluid py-5 text-center">
        {% block main %}{% endblock %}
    </main>
</body>

.navbar {
    height: 100;
    overflow: hidden;
}


.navbar-nav {
    align-items: baseline;
    display: flex;
    float: right;
    gap: 3em;
}


.nav-link {
    color: black;
    display: flex;
    float: right;
}


.nav-link:hover {
    color: red;
}


.btn-secondary {
    background: none;
    border: none;
    color: black
}


.btn-secondary:hover {
    background: none;
    border: none;
    color: red;
}


.logo {
    display: flex;
    scale: 0.4;
    transform-origin: left;
}

Solution

Remove the "overflow: hidden;" style from .navbar css, so your code should be-

.navbar {
    height: 100;
}