<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;
}
}
}
I've been working on this code snippet to create a dropdown menu in the top navigation bar. However, I'm facing an issue where the display doesn't change to block when hovering over it as expected. Instead, the color of the product button changes. As I am relatively new to front-end development, any help or suggestions would be greatly appreciated.