Safari on iPhone doesn't show a after :activate

Question

My homepage code is not working on iPhone (6S, Safari):

<div class="Nav">
   <ul>
      <li><a href="/">G</a></li>
      <li><a href="/">Home</a></li>
      <li id="software"><a>Software</a>
         <ul>
            <li><a href="sw/android/">Android</a></li>
            <li><a href="sw/windows/">Windows</a></li>
         </ul>
      </li>
      <li><a href="about.html">&Uuml;ber</a></li>
   </ul>
</div>

CSS:

.Nav ul li:hover > ul, .Nav ul li:active > ul {
    display: block;
}

The Code works in Edge, Firefox (Desktop) & Chrome (Mobile)!

Answer 1

Just add in css to that elements cursor:pointer. This is hack for ios devices.

Answer 2

Thanks for the answer, but I took this to solve the problem:

<script type="text/javascript">
    document.addEventListener("touchstart", function() {},false);
</script>

Answer 3

Try the following:

Add onclick="" to anything you wish iOS to recognise as an element with a hover.

<div onclick="">Click Me!</div>

Source: Fix CSS hover on iPhone/iPad/iPod