title: Touch-screen users have to click link twice for it to work
body: <p>I have this drop-down menu that drops down on hover normally, but on touch devices, I simply made it so that you can click to open it as well.</p>
  
  <p>The problem is that it seems like the <code>&lt;ul&gt;</code> that drops down isn't completely in focus or something because I have to click the links twice on my iPhone 4 to make them work.</p>
  
  <p>Here's the code I'm working with:</p>
  
  <pre><code>$(document).ready(function() {
  
      $('.myMenu &gt; li').bind('mouseover', openSubMenu);
      $('.myMenu &gt; li').bind('mouseout', closeSubMenu);
      $('.myMenu &gt; li').bind('click', toggleSubMenu);
  
      /* Also tried, currently using:
      $('.myMenu &gt; li').bind('tap', toggleSubMenu);
      */
  
      function openSubMenu() {
          $(this).find('ul').addClass("hovered");
      };
  
      function closeSubMenu() {
          $(this).find('ul').removeClass("hovered");
      };
  
      function toggleSubMenu() {
          $(this).find('ul').toggleClass("hovered").focus();
      };
  
  });
  </code></pre>
  
  <p>The <code>.focus()</code> was the fix I tried adding. It didn't break the code but didn't fix it either. I know there are several things I can do to make it better for touch-devices, but for now, the click method is what I'm sticking with.</p>
  
  <p>By the way:</p>
  
  <pre><code>.hovered{
      opacity:1 !important;
      visibility: visible !important;
  }
  </code></pre>
  
  <p>The HTML setup is basically <code>&lt;ul&gt;</code>s inside <code>&lt;ul&gt;</code>s like you would expect from a drop-down menu. If you for some reason want the markup just say so and I'll add it.</p>
  
  <p>EDIT: Here's the link to the website I'm working on:
  <a href="http://bok-it.underbakke.net" rel="noreferrer">http://bok-it.underbakke.net</a></p>
  
  <p>EDIT: Some additional information you might find useful that I noticed just now. The first time I click the link, the CSS on that link acts like it's hovered (as : hover) when I click on the sub-link the first time the main link (the one I first clicked to show the dropdown) loses the state of hover. This is why I think this is a focus issue.</p>
  
  <p>EDIT: The HTML markup as requested:</p>
  
  <pre><code>&lt;ul class="myMenu"&gt;
          &lt;li&gt;&lt;a href="/"&gt;&lt;span class="icon-home"&gt;&lt;/span&gt; Framside&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" id="nbutikk"&gt;&lt;span class="icon-cart"&gt;&lt;/span&gt; Butikk&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="/sand"&gt;&lt;span class="icon-cart"&gt;&lt;/span&gt; Sand&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/sauda"&gt;&lt;span class="icon-cart"&gt;&lt;/span&gt; Sauda&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="http://kontorhandel.no"&gt;&lt;span class="icon-cart"&gt;&lt;/span&gt; Nettbutikk&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" id="nit-tjenester"&gt;&lt;span class="icon-console"&gt;&lt;/span&gt; IT Tjenester&lt;/a&gt;
             &lt;ul&gt;
                  &lt;li&gt;&lt;a href="/driftsavtale"&gt;&lt;span class="icon-console"&gt;&lt;/span&gt; Driftsavtale&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/asp_vps"&gt;&lt;span class="icon-console"&gt;&lt;/span&gt; ASP &amp; VPS&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/overvaking"&gt;&lt;span class="icon-console"&gt;&lt;/span&gt; Overvåking&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/nettverk"&gt;&lt;span class="icon-console"&gt;&lt;/span&gt; Nettverk&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" id="nsupport"&gt;&lt;span class="icon-info"&gt;&lt;/span&gt; Support&lt;/a&gt;
             &lt;ul&gt;
                  &lt;li&gt;&lt;a href="/fjernsupport"&gt;&lt;span class="icon-info"&gt;&lt;/span&gt; Fjernsupport&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/utskrift_asp"&gt;&lt;span class="icon-info"&gt;&lt;/span&gt; Utskrift ASP&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="/rdp_rycloud"&gt;&lt;span class="icon-info"&gt;&lt;/span&gt; RDP: Rycloud&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="teamviewer_host"&gt;&lt;span class="icon-info"&gt;&lt;/span&gt; TeamViewer Host&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="/kontakt"&gt;&lt;span class="icon-mail"&gt;&lt;/span&gt; Kontakt Oss&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>--------------SOLUTION--------------</p>
  
  <p>EDIT: For people that are seeking the solution to this, here's the jQuery that fixed it for me (You should also give @jonsuh an upvote for wipping out the solution):</p>
  
  <pre><code>$(".myMenu li ul li a").on("touchend", function(event) {
    window.location.href = $(this).attr("href");
  });
  </code></pre>