How to prevent links displayed on :focus/:active from auto-clicking on a touch screen?

Question

I am designing a sidebar, which hides menu entries unless the user hovers over it/ or taps it on a mobile device. The problem occurs on mobile devices (or when I test my code in chrome with mobile mode toggled in developer options). In touch mode, if I tap on the sidebar where a menu entry would be displayed after focus, the newly visible menu entry is automatically clicked. Is there a way to disable auto-clicking of links that newly become visible under the pointer?

My preferred solution would be pure CSS - but I can work with vanilla JS if there is not other option.

Here is my fiddle: https://jsfiddle.net/n7nsdL49/

HTML:

<div class="sidebar">
    <div class="menu">
        <ul class="menu">
            <li><a href="http://www.google.com" target="_blank">This</a></li>
            <li><a href="http://www.google.com" target="_blank">is</a></li>
            <li><a href="http://www.google.com" target="_blank">a</a></li>
            <li><a href="http://www.google.com" target="_blank">menu.</a></li>
        </ul>
    </div>
</div>

CSS:

.sidebar {
  position: fixed;
  height: 100%;
  width: 10%;
  background-color : green;
}
.menu {
  display: none
}
.sidebar:hover, .sidebar:focus {
  width: 20%;
  background-color: red;
}
.sidebar:hover .menu, .sidebar:focus .menu {
  display: block;
}

EDIT: I have tried playing around with pointer-events option but it seems to have no effect on links being auto-clicked when displayed.

Answer 1

I was able to get around auto-clicking of newly visible links by using the animation property. Essentially, I animate the menu class to become visible a small interval after getting focus or hover. That way the clicks do not register if a newly displayed link is below a pointer event. Here is the fiddle: https://jsfiddle.net/nu9vr1sm/.

HTML:

<div class="sidebar">
    <div class="menu">
        <ul class="menu">
            <li><a href="http://www.google.com" target="_blank">This</a></li>
            <li><a href="http://www.google.com" target="_blank">is</a></li>
            <li><a href="http://www.google.com" target="_blank">a</a></li>
            <li><a href="http://www.google.com" target="_blank">menu.</a></li>
        </ul>
    </div>
</div>

CSS:

.sidebar {
  position: fixed;
  height: 100%;
  width: 10%;
  background-color : green;
}
.menu {
  display: none;
  visibility: hidden;    /* <= include this property */
}
.sidebar:hover, .sidebar:focus {
  width: 20%;
  background-color: red;
}

/* ================== */
/* THE IMPORTANT PART */
/* ================== */
.sidebar:hover .menu,
.sidebar:focus .menu {
        display: block;                /* make it part of the DOM */
        animation: fadeIn 0.05s;       /* make it visible after a while */
        animation-fill-mode: forwards; /* make it retain final visibility */
    }

@keyframes fadeIn {
  99% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
/* ================== */