Как починить :hover под мобильные устройства?

#html #css

Всем привет, прошу совета.  
Есть выпадающее меню, реализованное через css :hover, т.е. есть пункт меню, при наведении
срабатывает hover и подменю у данного пункта меняет свойство display на block, после
того как убрали мышь, снова становится none. На обычном ПК все хорошо, но на мобильных
из-за отсутствия возможности просто навести данная реализация не работает. Как можно
это поправить? Чтобы на мобильных устройствах меню тоже выпадало (сейчас при клике
оно выпадает, но сразу же переходит по ссылке на первом пункте). Если же это нереально,
то как можно реализовать меню, чтобы оно было выпадающим и работало на всех устройствах
(те примеры, что я находил через jquery, не подходят, т.к. там основные пункты меню
не работают как ссылки, т.е. при клике на них меню просто выпадает, а нужен переход).

Пример 

О компании
Вакансии
Проекты
Отзывы



Тут из пункта О компании выпадает Вакансии.    

Ответы

Ответ 1

Проблема актуальна, можно решать таким образом:

Hello



Даем объектам атрибут data-hover с наименованием класса, который отображает состояние
hover этого элемента, в дополнение проверяем на ссылку, если ссылка то переходим "по
второму клику".


Ответ 2

И так... я не программист, а скорее дизайнер, но вот что у нас получилось, и вроде
бы рабочее:


    
        

        


    



    
Пункт 1
    
Пункт 2
    
Пункт 3
    

        Выпадающее меню
        

                
Пункт A
                
Пункт B
                
Пункт C
        
    






Идея с active провалилась. При клике, конечно, у нас блок появляется, но как только
отпустить курсор (а может быть, и палец), все пропадает. Была идея сделать задержку
анимацией, но, что-то там не срослось.


Ответ 3

Можно добавить кнопку-стрелочку, по которой бы открывалось подменю на мобильных экранах


Ответ 4

Лично я не нашел универсального вменяемого решения с использованием :hover для мобильных
устройств, поэтому сделал следующее.
Заменил в стилях сss псевдокласс ':hover' на класс '.hover',
а для всех элементов, где надо использовать визуальный эффект добавил класс 'unhover':



Поехали




Далее, вживляем js скрипт (в данном случае с использованием jQuery):



$(document).ready(function(){
 $('.unhover').click(function(){
$(this).addClass('hover');
setTimeout("jQuery('.unhover').removeClass('hover')", 500);
 });
});




И вуаля! Доп. класс живет у нас ровно 500 мс и обеспечивает необходимые эффекты.