title: Hover menu is not working on touch-device because link gets triggered
body: <p>I've got the following problem with a menu on a responive website:</p>
  
  <p>I created a html menu which has <code>ul</code>/<code>li</code>-structure which contains links as category-names</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
         &lt;a href="linkToCat"&gt;maincat1&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a href="linkToCat"&gt;subcat1.1&lt;/a&gt;
                  &lt;ul&gt;
                      //deeper category stucture
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
         &lt;a href="linkToCat"&gt;maincat2&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a href="linkToCat"&gt;subcat2.1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="linkToCat"&gt;subcat2.2&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;style&gt;
      li &gt; ul {
          display:none;
      } 
  
      li:hover &gt; ul {
          display:block;
      } 
  &lt;/style&gt;
  </code></pre>
  
  <p>I am only showing the maincats at the beginning and the the subcats open on hover as shown in this <a href="https://jsfiddle.net/yz88p2f4/" rel="nofollow noreferrer">JSFiddle</a>.</p>
  
  <p>Everything just works fine on desktop. The problem is that it doesnt work on touch-devices (e.g. smartphones/tablets) as soon as I use links as the names of the categories (Which I need to do). </p>
  
  <p>Is there any way to make a menu that works with hover on desktop and that is still useable on touch-devices when using links as categorynames?</p>
  
  <p>I got no problem about using JavaScript or jQuery to solve this problem. Normally I am using a responsive design with a extram menu for smartphones or other mobile devices. Therefor I am using <code>@media screen</code>. This sadly doesn't work with all touch devices like for example bigger tablets like some iPads or the microsoft surface.</p>
  
  <p>Thank you for your answers and hints.</p>
  
  <p><strong>Edit:</strong>
  The problem is the <code>&lt;a href&gt;</code> The link always get triggert and so the menu doesn't open when i click on a category.
  I now also have added links to the categorynames in the <a href="https://jsfiddle.net/yz88p2f4/" rel="nofollow noreferrer">JSFiddle</a></p>