Упразднить псевдокласс :hover с помощью CSS

Добрый день! Есть выпадающее меню, которое реализуется так:

.menu:hover > .sub_menu{
    display:block;
}

В мобильной версии сайта, выпадающее меню хочу реализовать через клик. Чтобы отменить эффект hover по медиа-запросу, в соседних темах советуют сделать так:

.menu:hover > .sub_menu{
    display:none;
}

Но данная конструкция не отменяет hover, а переопределяет его. В итоге имеем такую ситуацию, когда меню раскрывается по клику, а если увести мышку с меню и завести обратно, то срабатывает display:none. Хотелось бы избежать такой ситуации и просто упразднить эффект hover. Можно ли так сделать на CSS не задействуя JS?