title: Navigation menu drop down on mobile does not dissapear after clicked
body: <p>As title says - I have a little, but annoying problem and cannot seem to find a solution, perhaps someone can help me:</p>
  
  <p>I have a navigation bar with some subcategory menus that drop down on hover, when clicked on subcategory the page loads via AJAX, so the page top including menu does not reload, all works fine on desktop, but on the phone the drop down (which displays on hover), does not disappear when clicked on, but instead stays on all the time (no mouse on phone, so cursor stays on it I guess.) </p>
  
  <p>Code example:</p>
  
  <pre><code>  &lt;ul id="myUL"&gt;
    &lt;li id="first_item"&gt;&lt;a href="#"&gt; More names&lt;/a&gt;
        &lt;div class="subcategories" style="display:none;"&gt;
             &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;name 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;name 2&lt;/a&gt;&lt;/li&gt;
                  ....
             &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Agnes&lt;/a&gt;&lt;/li&gt;
  
    &lt;li&gt;&lt;a href="#"&gt;Billy&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Bob&lt;/a&gt;&lt;/li&gt;
  
    &lt;li&gt;&lt;a href="#"&gt;Calvin&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Christina&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Cindy&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>style.css</strong></p>
  
  <pre><code>#myUL #first_item:hover .subcategories
  {
    display:block;
  }
  </code></pre>
  
  <p>Is there a way to move cursor to a different location on screen or do you know of any other solution? </p>