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

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 >
            <div >
            <a  href="/"><img src="static/Logo_2.png" alt="Logo"></a>
            <div >
                {% if not session["id"] %}
                    <a  href="login">Log In</a>
                {% endif %}
                {% if session["id"] %}
                    <a  href="languages">Languages</a>
                    <a  href="faq">FAQs</a>
                    <div >
                        <button  type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                          Account
                        </button>
                        <ul  aria-labelledby="dropdownMenuButton1">
                          <li><a  href="logout">My Account</a></li>
                          <li><a  href="logout">Log Out</a></li>
                        </ul>
                      </div>
                {% endif %}
            </div>
            </div>
        </nav>
        ...

.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;
}

CodePudding user response：

your example should be cut down to just the minimum that displays the issue. you have extra classes, some ASP-like code, etc - none of that is needed and just makes it harder to diagnose.

the issue appears to be that your submenu is contained inside the top-level .navbar element, but you are constraining that to have a height of 100 (and you should include the metric here - 100px? 100cm?) with overflow being hidden. this means that the submenu gets cut off.

you could just remove those constraints.

a better solution would involve a rewrite, so the submenu items are positioned absolutely, in a relatively-positioned placeholder. there are examples of this online. example: https://gist.github.com/SamWM/901853

CodePudding user response：

{% if not session["id"] %} Log In {% endif %} {% if session["id"] %} Languages FAQs Account

My Account

Log Out

{% endif %} ...

CodePudding user response：

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

.navbar {
    height: 100;
}