How to override hover inheritance in a media query?

Question

css

I am writing a responsive menu for a website. I encountered such a problem: in the hamburger menu, hover pops up when hovering over a sub-item, but on mobile devices it is not needed at all. How to get rid of him, I have no idea. I found a solution to this problem on the Internet, but only with the help of preprocessors. But this layout is actually already completely written without preprocessors, and I still don’t know how to typeset with preprocessors, so this option didn’t suit me. I will be grateful for any help.
Code: https://jsfiddle.net/0vo5nw84/5/

Answer 1

@media (min-width:1200px) { сюда перенесите ховер };

if you do this, then the hover will only be after a width of 1200, it will not be lower.

Answer 2

The preprocessor doesn't do magic, it compiles to the same CSS.
Look at what it turns into after the preprocessor and use it.