How to prevent inheriting a rule in a lower width media query

Issue

I have a rule in an upper query:

@media (max-width: 3000px) { 

    .dropdown-w:hover .dropdown-content-w {
        display: block;
    }
} 

that is inherited in this media query:

@media (max-width: 767.98px) {
  
      /*.dropdown-w:hover .dropdown-content-w {
      
      }*/

    .dblock {
        display: block;
    }
}

Since in a lower width media query I use 'click' to display block the element intead of hovering. But the hover overrides the click behavior. How to cause that rule not to inherit?

Solution

As 767.98px is less than 3000px, every screen-size less than 3000px gets applied with those media-queries. Same thing is happening here. As 767.98px is less than 3000px, media-queries are applied. To not apply for screen size less than 767.98px, modify your media query

@media (min-width: 767.98px) and (max-width: 3000px) {
    .dropdown-w:hover .dropdown-content-w {
        display: block;
    }
}

Now, windows with screen sizes less than 767.98px won't inherit the above properties because they are simply not applied to screen sizes below 767.98px..

Answered By - Geeky Quentin