Dropdown menu doesn't dropdown on hover

Question

                            <li className={styles.link + " " + styles.hideOnMobile}>
                            <div className={styles.dropdownMenu}>
                                <button className={styles.dropbtn}>Product</button>
                                <div className={styles.dropdownContent}>
                                    <a
                                        href="#"
                                        onClick={this._trackClick.bind(this, "header")}
                                    >
                                        Link 1
                                    </a>
                                    <a
                                        href="#"
                                        onClick={this._trackClick.bind(this, "header")}
                                    >
                                        Link 2
                                    </a>
                                </div>
                            </div>
                        </li>


.dropdownMenu {
    position: relative;
    display: inline-block;
}

.dropbtn {  
    padding: 14px 16px;     
    font-size: 16px;
    border: none;
    outline: none;
    margin: 0;
    &:hover{        
        background-color: $color-active-dark;
        cursor: pointer;
    }   
}

.dropdownContent {

    display: none;
    position: absolute;
    background-color: $color-active-dark;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    &:hover {
        display: block;
        cursor: pointer;
    }
    a {
        float: none;
        text-align: left;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        &:hover{
            background-color: $color-active-dark;
            cursor: pointer;
        }
    }
}

This is my code, currently it doesn't seem to change the display to block when I hover over it and I'm not sure why. It is suppose to be a dropdown menu on top nav bar where when I hover, Link 1 and Link 2 is suppose to dropdown, but right now when I hover, the product button changes color. I'm pretty new at front-end, so any help is appreciated.

Answer 1

Add an extra line (extra selector) to your css to open submenu on hover. In plain css:

.dropdownContent:hover,
.dropbtn:hover + div {
  display: block;
  cursor: pointer;
}

You asked for the dropdown on the hover trigger. This is not the "toggle" mechanism for touchscreen because that has to be done with Javascript.

update

Your other question: How to toggle (open/close on click) the dropdown?

<script>
var Buttons = document.querySelectorAll(".dropbtn");
for (var i = 0; i < Buttons.length; i++) {
  Buttons[i].addEventListener("click", function(event) {
    var Divs = document.querySelectorAll(".dropdownContent");
    var Shown = (this.nextElementSibling.classList.contains("show"));
    for (var j = 0; j < Divs.length; j++) Divs[j].classList.remove("show");
    if (Shown) this.nextElementSibling.classList.remove("show");
    else this.nextElementSibling.classList.add("show");
  });
}
</script>

with the following extra css at the end of your current nav css

.dropdownContent {
  display: none;
}
.dropdownContent.show {
  display: block;
}

Ofcourse this Javascript will open only one dropdown at a time if you have a navigation with multiple <li class="link hideOnMobile"> items.