title: CSS Dynamic Navigation with Hover - How Do I make it work in iOS Safari?
body: <p>In my site I use a CSS only dynamic menu. This is fine in desktop browsers, but not on iOS (iphone, ipad, etc) because the touch interface does not support the <code>:hover</code> selector.</p>
  
  <p>My question is: what is the best way of supporting this on iOS? (Ideally either by patching with some CSS, or Javascript that will make the existing code work, rather than doing the whole thing over just to support iOS)</p>
  
  <p>My html looks like this</p>
  
  <pre><code>&lt;ul id="nav"&gt; 
    &lt;li&gt; 
       Item 1
       &lt;ul&gt; 
         &lt;li&gt;&lt;a href=''&gt;sub nav 1.1&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=''&gt;sub nav 1.2&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt; 
    &lt;/li&gt; 
    &lt;li&gt; 
       Item 2
       &lt;ul&gt; 
         &lt;li&gt;&lt;a href=''&gt;sub nav 2.1&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=''&gt;sub nav 2.2&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt; 
    &lt;/li&gt; 
    &lt;li&gt; 
       Item 3 
       &lt;ul&gt; 
          &lt;li&gt;&lt;a href=''&gt;sub nav 3.1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=''&gt;sub nav 3.2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt; 
    &lt;/li&gt; 
  &lt;/ul&gt; ​​​​​
  </code></pre>
  
  <p>And the CSS is this</p>
  
  <pre><code>#nav li {
      float:left;
      padding:0 15px;
  }
  
  #nav li ul {
      position: absolute;
      width: 10em;
      left: -999em;
      margin-left: -10px;
  }
  
  #nav li:hover ul {
      left: auto;
  }
  </code></pre>
  
  <p>I have done a jsfiddle of this here: <a href="http://jsfiddle.net/NuTz4/" rel="noreferrer">http://jsfiddle.net/NuTz4/</a></p>