Drop-down menu is not working for some reason

December 12, 2021

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 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;
}

>Solution :

you need to wrap youre 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 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>