title: Drop down Jquery/CSS menu not responding on iPad/iPhone
body: <p>I've been designing and coding up my website and the simple drop down menu doesn't work when viewing the site on an iPad or iPhone.</p>
  
  <p>I've looked around and tried to implement some of the solutions that are online, ie jquery snippets that recognise when the user is using a particular kind of device, but to no avail. I'm not sure if its because these methods are deprecated or because I'm doing it wrong (probably the latter)</p>
  
  <p>The website in question is <a href="http://www.sotomayormac.com" rel="nofollow">http://www.sotomayormac.com</a></p>
  
  <p>the top menu item: "Our thinking" drops down to a submenu via a href=# link. This gets highlighted ( a:hover) when its tapped on an iPad/iPhone, but no submenu appears. I'm pretty sure this is a key part of the problem.</p>
  
  <p>html code for the menu is as follows:
      </p>
  
  <pre><code> &lt;!-- Start of MENU --&gt;
   &lt;ul id="ddmenu"&gt;
  &lt;li&gt;&lt;a id="topLink" href="#"&gt;Our thinking&lt;/a&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="index.html"&gt;Showcase&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="about.html"&gt;About us&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;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <p>the corresponding CSS:</p>
  
  <pre><code>#ddmenu {
  background: #fff no no-repeat;
  margin-left:50px;
  padding: 0;
  height:43px;
  width:200px;
  }
  
  #ddmenu li {
  float: left;
  list-style: none;
  margin-left:0px;
  }
  
  #ddmenu li a {
  background:#fff;
  display: block;
  padding: 0px 0px;
  text-decoration: none;
  width: 70px;
  color:#000;
  white-space: nowrap;
  text-align:left;
  }
  
  #ddmenu li a:hover {
  background: #fff;
  color:#666;
  }
  
  #ddmenu li ul {
  margin: 10px 0 0 0px;
  padding: 0;
  position: absolute;
  visibility: hidden;
  width:600px;
  }
  
  #ddmenu li ul li {
  display:inline;
  }
  
  #ddmenu li ul li a {
  width: auto;
  background: #fff  right no-repeat;
  display: inline;
  color: #000;
  padding-right:10px;
  }
  
  #ddmenu li ul li a:hover {
  background: #fff no-repeat;
  color:#666;
  }
  </code></pre>
  
  <p>and jquery:</p>
  
  <pre><code>// &lt;![CDATA[
  var timeout    = 500;
  var closetimer = 500;
  var ddmenuitem = 0;
  
  function ddmenu_open(){
      ddmenu_canceltimer();
         ddmenu_close();
         ddmenuitem = $(this).find('ul').css('visibility', 'visible');
  }
  
  function ddmenu_close(){
      if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
  }
  
  function ddmenu_timer(){
      closetimer = window.setTimeout(ddmenu_close, timeout);
  }
  
  function ddmenu_canceltimer(){
      if(closetimer){
          window.clearTimeout(closetimer);
              closetimer = null;
  }}
  
  $(document).ready(function(){
      $('#ddmenu &gt; li').bind('mouseover', ddmenu_open)
      $('#ddmenu &gt; li').bind('mouseout',  ddmenu_timer)
  });
  
  document.onclick = ddmenu_close;
  // ]]&gt;
  </code></pre>
  
  <p>I think thats about it. I'm a noob on this kind of stuff so any help would be much appreciated. It's probably staring me right in the face but I cant figure it out!</p>
  
  <p>Cheers</p>
  
  <p>ALL the jscript:</p>
  
  <pre><code>$(document).ready(function() {
  
  });
  $("#slideshow").css("overflow", "hidden");
  
  $("ul#slides").cycle({
  fx: 'fade',
  speed: 2000,
  timeout: 8000,
  pause: true,
  prev: '#prev',
  next: '#next',
  after:     onAfter
  });
  
  function onAfter(curr,next,opts) {
  var caption =(opts.currSlide + 1) + ' / ' + opts.slideCount;
  $('#caption').html(caption);
  }
  
  $(".button").hover(function() {
      $(this).attr("src","socialnetworks_hover_03.gif");
          }, function() {
      $(this).attr("src","socialnetworks_05.gif");
  });
  
  // &lt;![CDATA[
  var timeout    = 500;
  var closetimer = 500;
  var ddmenuitem = 0;
  
  function ddmenu_open(){
      ddmenu_canceltimer();
         ddmenu_close();
         ddmenuitem = $(this).find('ul').css('visibility', 'visible');
  }
  
  function ddmenu_close(){
      if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
  }
  
  function ddmenu_timer(){
      closetimer = window.setTimeout(ddmenu_close, timeout);
  }
  
  function ddmenu_canceltimer(){
      if(closetimer){
          window.clearTimeout(closetimer);
              closetimer = null;
  }}
  
  var toggle_clicked = false;
  function ddmenu_toggle(){
  if(toggle_clicked) {
      toggle_clicked = false;
      ddmenu_timer();
  } else {
      toggle_clicked = true;
      ddmenu_open();
  }
  }
  
  $(document).ready(function(){
  if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||              (navigator.userAgent.match(/iPad/i))) { 
      $('#ddmenu &gt; li').bind('click', ddmenu_toggle);
  } else {
      $('#ddmenu &gt; li').bind('mouseover', ddmenu_open);
      $('#ddmenu &gt; li').bind('mouseout',  ddmenu_timer);  
  }
  });
  
  document.onclick = ddmenu_close;
  // ]]&gt;
  </code></pre>