Большинству сенсорных устройств не хватает способности вызывать истинное взаимодействие при наведении (за некоторыми исключениями могут быть Samsung Galaxy Note с ручкой, устройства Microsoft Surface с ручкой и iPad Pro с ручкой).
Тем не менее, касание элемента, который имеет псевдоселектор :hover со связанными стилями (как вы делаете), должно вызывать это событие при наведении курсора, даже в мобильных браузерах на сенсорных устройствах.
Вы просматривали свой сайт на сенсорном устройстве? Меню появляется, как и ожидалось, при нажатии на мой Google Pixel (с браузером Chromium), а также на моем устройстве Surface в режиме планшета.
Возможно, некоторые браузеры / устройства или их комбинации не демонстрируют такого поведения, но я считаю, что это вполне стандартно.
Если вам нужно более принципиальное решение, я бы предложил сделать переключатель nav элемент <button> и выполнить некоторые основные c JavaScript для click событий. Я понимаю, что вы не хотите уходить на эту территорию прямо сейчас, но это именно тот случай использования, при котором JavaScript превосходит.
Если вы действительно хотите избежать JavaScript и вам не нравится полагаться на подход touch-invokes-hover-event, всегда есть взлом флажка. Как видно из названия, это взломать. Я бы не рекомендовал его для вашего конкретного случая использования. Но каждому свое.
Вот статья a CSS Об уловках по всем интересным применениям, к которой может быть применен флажок.