下拉選單由于某種原因不起作用-有解無憂

我的下拉效果不起作用我做錯了什么。我已經嘗試過將顯示放置到none并使用，:hover但沒有任何效果。

一旦我將滑鼠懸停在選單上，.drp-btn:hover .menu-content-container就不起作用。

<div class="nav-container">
    <div class="drp-btn"> Menu </div>
    
    <div class="menu-content-container">
        <ul class="menu-content">
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Booking</a></li>
        </ul>
    </div>
</div>

.nav-container {
    margin-top: 2px;
    display: flex;
    flex-direction: column;
}

.menu-content-container {
    border: 5px solid red;
}

.drp-btn {
    margin-left: 60vw;
    border: 2px solid red;
    font-size: 20px;
}

.drp-btn:hover .menu-content-container {
    display: flex;
    background-color: red;
    color: white;
}

.menu-content-container {
    display: none;
}

.nav-container ul li {
    margin-left: 2%;
    list-style-type: none;
}

.nav-container a {
    font-size: 20px;
    text-decoration: none;
}

uj5u.com熱心網友回復：

<div class="nav-container">
    <div class="drp-btn"> Menu 
        <div class="menu-content-container">
            <ul class="menu-content">
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Booking</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div>
    </div> 
</div>

包裝代碼 drp-btn div

uj5u.com熱心網友回復：

您需要將 menu-content-container 包裝到 drp-btn div 中以使其作業：

.nav-container {
    margin-top: 2px;
    display: flex;
    flex-direction: column;
}

.menu-content-container {
    border: 5px solid red;
}

.drp-btn {
    margin-left: 60vw;
    border: 2px solid red;
    font-size: 20px;
}

.drp-btn:hover .menu-content-container {
    display: flex;
    background-color: red;
    color: white;
}

.menu-content-container {
    display: none;
}

.nav-container ul li {
    margin-left: 2%;
    list-style-type: none;

}

.nav-container a {
    font-size: 20px;
    text-decoration: none;

}

<div class="nav-container">
                <div class="drp-btn"> Menu 
                  <div class="menu-content-container">
                    <ul class="menu-content">
                        <li><a href="">Home</a></li>
                        <li><a href="">About</a></li>
                        <li><a href="">Booking</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </div>
  </div>

                
            </div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/379694.html

標籤：html css

上一篇：CSS“FasFa-Bars”沒有輸出

下一篇：Bootstrap5：滾動300像素后隱藏/顯示導航欄