title: css :focus not working in iOS Safari/Chrome, fine on Android/PC Chrome
body: <p>I have a project where I cannot modify the HTML.
  On mobile, I have to have an openable menu, but I had to add a :before pseudo-element so the clicking does not activate the link and then when the menu opened(when it is focused), with transition I move the :before element up, so the user can click the links.
  This works fine on Chrome on my PC, also on my Android phone, but not on iOS Safari or Chrome...</p>
  
  <p>Here it is: <a href="http://jsfiddle.net/59pp5o7t/1/" rel="nofollow">http://jsfiddle.net/59pp5o7t/1/</a></p>
  
  <p>Do you have any idea what the problem is or have a better CSS-only solution for my problem?</p>
  
  <p>Thank you!</p>
  
  <pre><code>&lt;div class="portlet-body"&gt;
  &lt;div class="nav-menu nav-menu-style-"&gt;
      &lt;ul class="layouts level-1"&gt;
          &lt;li class="open selected "&gt;&lt;a class="open selected " href="#"&gt; Page 1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="open "&gt;&lt;a class="open " href="#"&gt; Page 2&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="open "&gt;&lt;a class="open " href="#"&gt; Page 3&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="open "&gt;&lt;a class="open " href="#"&gt; Page 4&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>