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 中。悬停时，您将显示下拉内容，并且由于它占用垂直空间，因此会推送内容。

为避免这种情况，您必须将下拉内容位置设置为absolute。 不要忘记将 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>