Show dropdown-menu on hover and close on click using only CSS
<p>Can someone help me with an explanation as to why the links from a dropdown menu are not working when I click on them? Maybe because of pointer events? I'm trying to have a dropdown menu that is closing after a link is clicked or the close button is clicked. I have added some cool stuff like hiding parent container when a link is clicked.</p>

<p>There are many options doing that:</p>

<ol>
<li><p>using <code>:focus</code> but when the focus is used the drop-down will not be
triggered on the next hover over dropdown.</p></li>
<li><p>using <code>:active</code> on container and <code>pointer-events</code> to point only the
active links, but pointer events is buggy</p></li>
<li>using <code>:target</code> but has the same problem as :focus, will not trigger
the second hoover.</li>
</ol>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding: 20px;
}
.container {
    border: 1px solid lime;
    padding: 10px;
    width: 200px;
}
.test1 {
    display: none;
    border: 1px dashed orange;
    background: green;
    padding: 10px;
    pointer-events: none;
}
.container:hover .test1 {
    display: inline-block;
}
.container:hover .test1:active {
    display: none;
}
a {
    pointer-events: auto;
    color: lime;
    font-weight: bold;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="container"&gt;
  Drop down menu
 &lt;li class="test1"&gt;
 &lt;a class="dropdown" href="#"&gt;X Close&lt;/a&gt;
 &lt;ul class="content"&gt;
   CLOSE THIS CONTENT
  &lt;li class="link"&gt;&lt;a href="http://www.google.com"&gt;Go to link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li class="link"&gt;&lt;a href="https://www.google.co.uk"&gt;Go to link 2&lt;/a&gt;&lt;/li&gt;
  &lt;li class="link"&gt;&lt;a href="https://www.google.co.uk"&gt;Go to link 3&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;</code></pre>
</div>
</div>
</p>