Make a hover dropdown parent link only work when the dropdown children are displayed

Question

I have a classical dropdown hover menu, but the hover element is also a link in itself. It works fine in desktop, but on mobile I have the problem that I haven't found a way to display the dropdown, without following the link. For example:

  <li><a href="page1.html">Dropdown parent</a>
      <ul>
        <li><a href="page2.html">Dropdown element</a></li>
        <li><a href="page3.html">Dropdown element</a></li>
        <li><a href="page4.html">Dropdown element</a></li>
      </ul>
  </li>

So, on desktop you can normally hover over the parent, click it if you want, or click any of the dropdown elements. But on mobile, as there is no hover, you have to click the dropdown parent to be able to see the elements, but that would take you to the dropdown parent link.

Is there a way to make the link work only on the second click? Or only when the dropdown elements are being displayed? Thanks.