如何使我的下拉菜单在导航栏之外可见？答案

【问题标题】：How do i make my drop down menu visible beyond the navbar?如何使我的下拉菜单在导航栏之外可见？
【发布时间】：2022-12-06 22:29:52
【问题描述】：

我试图在导航栏中有一个下拉菜单；但是，它只会显示到我的导航栏的极限，理想情况下，我喜欢它可以说是在导航栏的“前面”。

Dropdown is cut off

我是 html 和 CSS 的新手，所以我的探索有些有限。我已经实现了引导程序的导航栏之一，还使用了他们的下拉按钮 html。我希望这可以正常工作，但是，如前所述，下拉菜单似乎绑定在导航栏内（假设这是因为它在导航栏 div 内？）我也尝试遵循 w3schools 指南，但我也没有成功.

旁注：由于可见性有限，“我的帐户”按钮会将用户注销，这是有意为之的 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>
        ...

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

【问题讨论】：

导航栏样式 overflow: hidden; 将如您所料隐藏溢出。你确定你需要那个规则吗？

标签： html css dropdown navbar

【解决方案1】：

您的示例应该减少到显示问题的最低限度。你有额外的类，一些类似 ASP 的代码，等等——这些都不是必需的，只会让诊断变得更难。

问题似乎是您的子菜单已包含里面顶级 .navbar 元素，但您将其限制为 100 的高度（并且您应该在此处包括度量标准 - 100px？100cm？）并隐藏溢出。这意味着子菜单被切断。

您可以删除这些限制。

更好的解决方案是重写，因此子菜单项绝对定位在相对定位的占位符中。网上有这样的例子。示例：https://gist.github.com/SamWM/901853

【讨论】：

【解决方案2】：

删除“溢出：隐藏；”来自 .navbar css 的样式，所以你的代码应该是 -

.navbar {
    height: 100;
}

【讨论】：