One of my CSS rules from a larger query is:
@media (max-width: 3000px) {
.dropdown-w:hover .dropdown-content-w {
display: block;
}
}
This rule is then inherited in a smaller media query:
@media (max-width: 767.98px) {
/*.dropdown-w:hover .dropdown-content-w {
}*/
.dblock {
display: block;
}
}
However, in the smaller media query, I need to use 'click' to display the element instead of hovering. The hover behavior is overriding the click behavior. How can I prevent this rule from being inherited and causing conflicts?