title: ul > li:hover .sub-menu { display: block; } - To get working on iPad?
body: <pre><code>&lt;li class="menu-item menu-item-has-children"&gt;&lt;a href="/us/"&gt;About Us&lt;/a&gt;
   &lt;ul class="sub-menu"&gt;
     &lt;li class="menu-item"&gt;&lt;a href="meet-team/"&gt;Meet the team&lt;/a&gt;&lt;/li&gt;
     &lt;li class="menu-item"&gt;&lt;a href="/history/"&gt;Our History&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>The above has a CSS solution to display the .sub-menu which works fine on desktop:</p>
  
  <pre><code>.ul li:hover .sub-menu { display:block; }
  .sub-menu { display:none; }
  </code></pre>
  
  <p>However, as the parent li have links, on IOS devices when clicking on the parent link to display a sub-menu, the page loads the parent link, missing out the sub-menu.</p>
  
  <p>Ideally on an Ipad, I would like to tap once to open up the sub-menu, then tap again on the same link to go to the parent link. Or tap on the sub-menu item once displayed.</p>