Problem with pointer-events and a:focus in CSS

If I understood you correctly, then maybe add this solution can help you:

.tab a + ul:hover {
  opacity: 1;
  transform: translateY(0px);
  pointer-events: all !important;
}

Because the focus of the link is lost, the submenu disappears, but you can leave the submenu by ul:hover.

P.S. By the way, on the example of the site that you specified, add this code at the end, it quite works (I tried using Web Inspector):

.menu-loisirs a + ul:hover, .menu-sports a + ul:hover {
    opacity: 1;
    transform: translateY(0px);
    pointer-events: all !important;
}

For this kind of interaction, :focus-within is usually quite suitable. When the "trigger" link and wrapper of its children share same wrapper, it makes sense to bind logic to state of that parent wrapper. To make such structure keyboard accessible, can use .wrapper:not(:hover):not(:focus-within) .trigger + .content { /* visually hidden state styles */}:

.tab:not(:hover):not(:focus-within) a + ul {
  display: none; /* for brevity, use accessible hiding in real world */
}

/* not necessary */
p[id]:not(:target) {
  display: none;
}

a[href]:empty:before {
  content: '🔗 ' attr(href);
}

p[id]:empty:before {
  content: '§ ' attr(id)
}

<div class="tab">
  <a href="#a"></a>
  <ul>
    <li>
      <a href="#a1"></a>
    </li>
    <li>
      <a href="#a2"></a>
    </li>
  </ul>
</div>
<div class="tab">
  <a href="#b"></a>
  <ul>
    <li>
      <a href="#b1"></a>
    </li>
    <li>
      <a href="#b2"></a>
    </li>
  </ul>
</div>
<p id="a"></p>
<p id="a1"></p>
<p id="a2"></p>
<p id="b"></p>
<p id="b1"></p>
<p id="b2"></p>

Check the browser support (not supported in IE11 and older browsers) and consult accessibility and screen reader support before using in production.