title: Drop-down menu automatically redirects to parent link on mobile devices
body: <p>I have a drop-down navigation menu on my website that works fine. However on mobile devices, when a user taps any menu item, they are shown the submenu for a fraction of a second and then automatically redirected to the parent link. I would like a function where tapping the parent link the first time opens the submenu, and a second tap redirects the user to the parent link. I would like something as explained here : <a href="http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly" rel="nofollow">http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly</a> </p>
  
  <p>However, I just want the double-tap feature. I have implemented the plug-in but it still doesn't work for me :/  My drop-down menu is coded with HTML and CSS.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul class = "dropdown"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;
          &lt;ul class="sub-menu"&gt;
             &lt;li&gt;&lt;a href="#"&gt;Sub Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Sub Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Sub Link&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>EDIT: Here is my CSS below. I tried to use the jQuery plug-in doubleTapToGo.js from the link above, but it would not work.</p>
  
  <pre class="lang-css prettyprint-override"><code>ul.dropdown,
  ul.dropdown li,
  ul.dropdown ul {
   list-style: none;
   margin: 0;
   padding: 0;
   font-size:11px;
   position: relative;
   float: left;
  }
  
  
  ul.dropdown li.hover,
  ul.dropdown li:hover {
   position: relative;
   cursor: default;
  }
  
  ul.dropdown ul {
   visibility: hidden;
   position: absolute;
   top: 100%;
   width: 100%;
  }
  
  ul.dropdown ul li {
   float: left;
   border-bottom:1px solid #000; 
   padding-bottom:0px;
   margin-bottom:0px; 
  }
  
  
  ul.dropdown li:hover &gt; ul {
   visibility: visible;
  }
  </code></pre>