title: JSDDM menu not working on Android
body: <p>I used a drop down menu I had found on here about a year ago called a "jsddm" menu. It worked then on Androids and is now not working on Androids but works on iPhones. Can anyone help me figure out why? Thanks! EDIT- By Not working I mean  - it does not toggle down. The gallery link does not take anyone anywhere. It's the sub menu that is what takes users to the gallery. On Androids it does not even show the drop down at all.
  Code * This is the original code (with my CSS mods) that I had found on here.</p>
  
  <p>Javascript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var timeout         = 500;
  var closetimer      = 0;
  var ddmenuitem      = 0;
  
  function jsddm_open()
  {   jsddm_canceltimer();
      jsddm_close();
      ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
  
  function jsddm_close()
  {   if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
  
  function jsddm_timer()
  {   closetimer = window.setTimeout(jsddm_close, timeout);}
  
  function jsddm_canceltimer()
  {   if(closetimer)
      {   window.clearTimeout(closetimer);
          closetimer = null;}}
  
  $(document).ready(function()
  {   $('#jsddm &gt; li').bind('mouseover', jsddm_open);
      $('#jsddm &gt; li').bind('mouseout',  jsddm_timer);});
  
  document.onclick = jsddm_close;
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#jsddm
  {   margin: 20px 0;
      text-align: center;
  
      }
  
      #jsddm li
      {   
          list-style: none;
          display: inline-block;
      }
  
      #jsddm li a
      {   font-family: 'Libre Baskerville', serif;
          text-shadow: none;
          color:#000;
          text-decoration: none;
          font-weight:normal;
          padding: 3px 10px;
  
      }
  
      #jsddm li a:hover
      {   color:#000;
          text-decoration:underline;}
  
          #jsddm li ul
          {   margin: 0;
              padding: 0;
              position: absolute;
              visibility: hidden;
              border-top: 1px solid white;
              font-size:.8em;}
  
              #jsddm li ul li
              {   float: none;
                  display: inline}
  
              #jsddm li ul li a
              {   width: auto;
                  background: #8e7967;
                  color: #24313C}
  
              #jsddm li ul li a:hover
              {   background: #fff;}
  
  
  HTML
  &lt;ul id="jsddm"&gt;
      &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;
      &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;
      &lt;li&gt;&lt;a href="pricing.html"&gt;Pricing&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="gameheadgallery.html"&gt;Game Heads&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="birdsgallery.html"&gt;Birds&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="fishgallery.html"&gt;Fish&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="exoticsgallery.html"&gt;Exotics&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="mammalgallery.html"&gt;Mammals&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="europeans.html"&gt;Europeans&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="field.html"&gt;Field Care Video&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>