title: List items as dropdown menu: fails on Safari
body: <p>I'm using list items for a dropdown menu, originally with <code>:hover</code>.   Works well with mouseovers on desktop, but not touchscreen taps.  First implemented advice to simulate the hover state with JavaScript <a href="https://stackoverflow.com/a/23012580/320036">here</a> (referred by @z0r):   </p>
  
  <pre><code>$('body').bind('touchstart', function() {});  
  </code></pre>
  
  <p>Then, all <code>:hover</code> selectors were duplicated as <code>:active</code>, eg: </p>
  
  <pre><code>ul.Menu li:hover&gt;ul,  
  ul.Menu li:active&gt;ul {display:block;}  
  </code></pre>
  
  <p>Although the submenu displays on iPhones (Safari) with a menu tap, it can't be selected: the submenu disappears.  Here's a fiddle:  <a href="http://jsfiddle.net/7jfo9x8h/2" rel="nofollow noreferrer">http://jsfiddle.net/7jfo9x8h/2</a>.   </p>
  
  <p>I'm not sure if the problem is browser/OS specific, but I think it works on Android/Chrome.  Any solutions need to be tested on iPhone (I do not own one).  Thanks in advance!</p>
  
  <p><em>Second Q:</em> I used <code>cursor:pointer</code> within css to show the box around MENU is clickable [thanks @DOC ASAREL, great tip].  But with html below and css shown in fiddle (updated code: <a href="http://jsfiddle.net/7jfo9x8h/9" rel="nofollow noreferrer">http://jsfiddle.net/7jfo9x8h/9</a>), only the text is clickable/hoverable.  What css mods are needed to make the full box active (click &amp; hover)?     Many thanks.</p>
  
  <pre><code>&lt;ul class="Menu"&gt;
    &lt;li&gt;MENU
     &lt;ul&gt;
      &lt;li&gt;&lt;a href="...  
  </code></pre>