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 {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; height: 10vh;&nbsp; &nbsp; background-color: lightgray;&nbsp; &nbsp; justify-content: space-between;&nbsp; &nbsp; align-items: center;}.Navbar-menu {&nbsp; &nbsp; display: flex;}.Navbar-dropdown {&nbsp; &nbsp; display: inline-flex;&nbsp; &nbsp; flex-wrap: wrap;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; border: 1px solid red;}.Navbar-dropdownMenu {&nbsp; &nbsp; background-color: lightgray;&nbsp; &nbsp; display: none;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 20px;&nbsp; &nbsp; right: 0;}.Navbar-dropdown:hover .Navbar-dropdownMenu {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;}<nav class="Navbar">&nbsp; &nbsp; <a class="Navbar-brand Navbar-link" href="./">Brand</a>&nbsp; &nbsp; <div class="Navbar-menu">&nbsp; &nbsp; &nbsp; &nbsp; <a class="Navbar-link Text-uppercase" href="./">Link 1</a>&nbsp; &nbsp; &nbsp; &nbsp; <a class="Navbar-link Text-uppercase" href="./">Link 2</a>&nbsp; &nbsp; &nbsp; &nbsp; <div class="Navbar-dropdown">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="Navbar-dropdownBtn">Kieli</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="Navbar-dropdownMenu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="Navbar-link" href="../en-fi/">Suomi</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="Navbar-link" href="../en-gb/">Englanti</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></nav>