Drop-down menu is not working for some reason-CodePudding

My dropdown effect is not working what am I doing wrong. I have tried by putting display to none and using the :hover but nothing works.

As soon as I hover over the Menu, .drp-btn:hover .menu-content-container doesn't work.

<div >
    <div > Menu </div>
    
    <div >
        <ul >
            <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;
}

CodePudding user response：

<div >
    <div > Menu 
        <div >
            <ul >
                <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>

wrap the code drp-btn div

CodePudding user response：

You need to wrap your menu-content-container into the drp-btn div to make that work:

.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 >
                <div > Menu 
                  <div >
                    <ul >
                        <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>