css :focus not working in iOS Safari/Chrome, fine on Android/PC Chrome

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...

Here it is: http://jsfiddle.net/59pp5o7t/1/

Do you have any idea what the problem is or have a better CSS-only solution for my problem?

Thank you!

<div class="portlet-body">
<div class="nav-menu nav-menu-style-">
    <ul class="layouts level-1">
        <li class="open selected "><a class="open selected " href="#"> Page 1</a>
        </li>
        <li class="open "><a class="open " href="#"> Page 2</a>
        </li>
        <li class="open "><a class="open " href="#"> Page 3</a>
        </li>
        <li class="open "><a class="open " href="#"> Page 4</a>
        </li>
    </ul>
</div>

Solution

If you can try to add a ontouchstart="" to the <body> tag it might work.

I'm not so sure about a CSS only solution.. =(

EDIT: Take a look at this as well.. LINK

Updated jsfiddle

<body ontouchstart="">
    <div class="portlet-body">
        <div class="nav-menu nav-menu-style-">
            <ul class="layouts level-1">
                <li class="open selected "><a class="open selected " href="#"> Page 1</a>
                </li>
                <li class="open "><a class="open " href="#"> Page 2</a>
                </li>
                <li class="open "><a class="open " href="#"> Page 3</a>
                </li>
                <li class="open "><a class="open " href="#"> Page 4</a>
                </li>
            </ul>
        </div>
    </div>
</body>