На touch-экранах нет понятия hover-эффекта, поэтому его нужно "придумать".

В стилях CSS оставляем, как и были стили для hover, а вот клик по верхним пунктам меню, нужно заменить на tap.

Для этого, ссылкам, подлежащим hover-обработке, добавляем data-атрибут (data-hover) с классом, который должен быть добавлен к элементу при наведении курсора на элемент (или первом клике при отсутствии курсора). И пишем скрипт:

$(document).on('click','[data-hover]',function(e){
	e.preventDefault();
	var $this = $(this);
	var onHover = $this.attr('data-hover');
	var linkHref = $this.attr('href');
	if (linkHref && $this.hasClass(onHover)) {
		location.href = linkHref;
		return false;
	}
	$this.toggleClass(onHover);
});
$(document).on('mouseenter mouseleave','li.menu__item',function () {
    var hoverLink = $(this).find('[data-hover]')
    if(hoverLink!==undefined && hoverLink.length>0){
        var onHover = hoverLink.attr('data-hover');
        hoverLink.toggleClass(onHover);
    }
});

Таким образом, на обычном экране, при наличии курсора мыши все будет работать, как и работало (в том числе и клик по верхнему элементу), а при отсутствии курсора, первый клик по верхнему разделу выполнит роль hover, но без перехода по ссылке, а вот второй клик уже произведет переход по выбранной ссылке.