第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

Flex 導(dǎo)航欄中的下拉菜單推送內(nèi)容

Flex 導(dǎo)航欄中的下拉菜單推送內(nèi)容

慕桂英3389331 2023-12-19 20:40:51
我正在嘗試向?qū)Ш綑谔砑右粋€(gè)下拉菜單,但是,當(dāng)將鼠標(biāo)懸停在下拉按鈕上時(shí)(在我的例子中是 Kieli),中心對齊會(huì)將其余項(xiàng)目推開。我附上了一個(gè)片段,其中包含我的問題的示例。.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貢獻(xiàn)1891條經(jīng)驗(yàn) 獲得超3個(gè)贊

內(nèi)容被推送是因?yàn)槟南吕藛挝挥谀?Navbar-dropdown 中。懸停時(shí),您將顯示下拉內(nèi)容,并且由于它占用垂直空間,因此會(huì)推送內(nèi)容。


為避免這種情況,您必須將下拉內(nèi)容位置設(shè)置為absolute。 不要忘記將 Navbar-dropdown 的位置設(shè)置為相對位置。


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


查看完整回答
反對 回復(fù) 2023-12-19
  • 1 回答
  • 0 關(guān)注
  • 184 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號