html - Flex 导航栏中的下拉菜单推送内容

Question

我正在尝试向导航栏添加一个下拉菜单，但是，当将鼠标悬停在下拉按钮(在我的例子中是 Kieli)上时，中心对齐会将其余元素推开。我附上了一个包含我的问题示例的片段。

.Navbar {
    display: flex;
    height: 10vh;
    background-color: lightgray;
    justify-content: space-between;
    align-items: center;
}

.Navbar-menu {
    display: flex;
}

.Navbar-dropdown {
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.Navbar-dropdownMenu {
    display: none;
}

.Navbar-dropdown:hover .Navbar-dropdownMenu {
    display: flex;
    flex-direction: column;
}

        <nav class="Navbar">
            <a class="Navbar-brand Navbar-link" href="./">Brand</a>
            <div class="Navbar-menu">
                <a class="Navbar-link Text-uppercase" href="./">Link 1</a>
                <a class="Navbar-link Text-uppercase" href="./">Link 2</a>


                <div class="Navbar-dropdown">
                    <button class="Navbar-dropdownBtn">Kieli</button>
                    <div class="Navbar-dropdownMenu">
                        <a class="Navbar-link" href="../en-fi/">Suomi</a>
                        <a class="Navbar-link" href="../en-gb/">Englanti</a>
                    </div>
                </div>
            </div>
        </nav>

Answer 1

内容被推送是因为您的下拉菜单位于Navbar-dropdown中。悬停时，您将显示下拉内容，并且由于它占用垂直空间，因此会推送内容。

为了避免这种情况，您必须将下拉内容位置设置为绝对。 不要忘记将 Navbar-dropdown 的位置设置为相对位置。

.Navbar {
    display: flex;
    height: 10vh;
    background-color: lightgray;
    justify-content: space-between;
    align-items: center;
}

.Navbar-menu {
    display: flex;
}

.Navbar-dropdown {
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: relative;
    border: 1px solid red;
}

.Navbar-dropdownMenu {
    background-color: lightgray;
    display: none;
    position: absolute;
    top: 20px;
    right: 0;
}

.Navbar-dropdown:hover .Navbar-dropdownMenu {
    display: flex;
    flex-direction: column;
}

<nav class="Navbar">
    <a class="Navbar-brand Navbar-link" href="./">Brand</a>
    <div class="Navbar-menu">
        <a class="Navbar-link Text-uppercase" href="./">Link 1</a>
        <a class="Navbar-link Text-uppercase" href="./">Link 2</a>


        <div class="Navbar-dropdown">
            <button class="Navbar-dropdownBtn">Kieli</button>
            <div class="Navbar-dropdownMenu">
                <a class="Navbar-link" href="../en-fi/">Suomi</a>
                <a class="Navbar-link" href="../en-gb/">Englanti</a>
            </div>
        </div>
    </div>
</nav>