title: Css hover+click/touch weird behavior on touch devices
body: <p>I know the title is too general. I couldn't find a specific title.</p>
  
  <p>Here is the sample <a href="https://jsfiddle.net/Exlord/1soagsL5/" rel="nofollow noreferrer">https://jsfiddle.net/Exlord/1soagsL5/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;item1&lt;/li&gt;
    &lt;li&gt;item1&lt;/li&gt;
    &lt;li&gt;item with submenu &amp;gt;
      &lt;ul&gt;
        &lt;li&gt;item1&lt;/li&gt;
        &lt;li&gt;item1&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;item1&lt;/li&gt;
    &lt;li id='clickable'&gt;item1&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>var el = document.getElementById('clickable');
  el.addEventListener('click', function(e) {
    console.log(e.target);
  }, false);
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 200px;
    max-width: 100%;
  }
  
  li {
    background: gray;
    padding: 5px;
    border: solid 1px black;
    position: relative;
  }
  
  li:hover &gt; ul {
    display: block;
  }
  
  @media all and (min-width: 481px) {
    ul ul {
      display: none;
      position: absolute;
      left: 100%;
      top: 0;
    }
  }
  
  @media all and (max-width: 480px) {
    ul ul {
      display: none;
    }
  }
  </code></pre>
  
  <p>Try it, it's a very simple menu, hover the middle item <em>item with submenu</em>, a simple submenu will be shown with simple CSS <code>:hover</code>.</p>
  
  <p>Click on the last item, it has a click event, it will fire correctly.</p>
  
  <p>Now open this in Chrome's mobile device mod with touch simulation.</p>
  
  <p>Click/touch the <em>item with submenu</em>, the submenu will open inside the parent element. This is the expected behavior.</p>
  
  <p>Now click/touch the last element. The click event will not fire.</p>
  
  <p>How can I fix this with CSS only <code>hover</code>?</p>
  
  <p>UPDATE : As far as I can tell the problem is that on first touch the last hovered element (<code>li</code> with submenu) gets unhovered and the submenu <code>ul</code> gets hidden and the parent <code>ul</code>'s height shrinks and the <code>li</code> element that was under the touched point moves up, so its not under the touched point anymore and it does not get clicked/touched !!!!</p>