Hover menu is not working on touch-device because link gets triggered

Question

I\'ve got the following problem with a menu on a responive website:

I created a html menu which has ul/li-structure which contains links as cat

Answer 1

Whatever you are doing should work on touch devices. But here is another way to do it using jQuery.

$('li').click(function(e){
    $(this).children('ul').toggle();
    e.stopPropagation();
});

Run the following code snippet to see. I have commented css property on hover display none so that you can have better understanding of jQuery code. Uncommenting it will also work fine.

$('li').click(function(e){
	$(this).children('ul').toggle();
  e.stopPropagation();
});

li > ul {
  display:none;
} 

/*li:hover > ul {
  display:block;
}*/

  

      maincat1
      

          

              subcat1.1
              

                  

                      subcat1.1.1
                  
                  

                      subcat1.1.2
                  
              
          
      
  
  

      maincat2
      

          

              subcat2.1
          
          

              subcat2.2
          
          

              subcat2.3
               

                  

                      subcat2.3.1
                  
                  

                      subcat2.3.2