html 如何使下拉菜单在导航栏之外可见？

uemypmqf 于 2022-12-09 发布在其他

关注(0)|答案(3)|浏览(215)

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

Html

来源：https://stackoverflow.com/questions/74703730/how-do-i-make-my-drop-down-menu-visible-beyond-the-navbar

3条答案

按热度按时间

js5cn81o1#

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

赞(0）回复(0）举报 2022-12-09

vom3gejh2#

{% if not session ["id"]%}登录{% endif %}{% if session ["id"]%}语言常见问题解答帐户
1.我的账户
1.注销{% endif %}...

赞(0）回复(0）举报 2022-12-09

cetgtptt3#

删除"溢出：hidden;"样式，所以您的代码应该-