亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Flex 導航欄中的下拉菜單推送內容

Flex 導航欄中的下拉菜單推送內容

慕桂英3389331 2023-12-19 20:40:51
我正在嘗試向導航欄添加一個下拉菜單,但是,當將鼠標懸停在下拉按鈕上時(在我的例子中是 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>
查看完整描述

1 回答

?
萬千封印

TA貢獻1891條經驗 獲得超3個贊

內容被推送是因為您的下拉菜單位于您的 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>


查看完整回答
反對 回復 2023-12-19
  • 1 回答
  • 0 關注
  • 189 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號