title: Pseudo-Class:focus-within does not work correctly
body: <p>I use the <strong>pseudo-class:focus-within</strong> on my menu to show the sub-menu on click, but it shows it for a second, and then the sub-menu disappears.
  There is no problem when I use pseudo-class: hover, I just have the problem with focus-within.</p>
  <blockquote>
  <p><strong>li class=&quot;has-sub-menu&quot;</strong> when I click on it to show the <strong>ul class=&quot;sub-menu&quot;</strong> it get disappear.</p>
  </blockquote>
  <p>Can anybody help me, please?</p>
  <p><strong>here are my HTML and CSS codes.</strong></p>
  <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>li.has-sub-menu{
      position: relative;
      margin-right: 10px;
      padding-bottom: 5px;    
  }
  
  ul.sub-menu{
      position: absolute;
      top:20px ;
      box-shadow: 0px 0px 3px 3px #a1a1a1;
      border-radius:2%;
      border: 1px solid; 
      display: none;
      white-space: nowrap;
      min-width: 100px;
  }
  
  li.has-sub-menu:focus-within ul.sub-menu{
      display: block;
  }
  
  .sub-menu li{
      border-bottom:1px #a1a1a1 dashed;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 30px;
      position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;ul&gt;
          &lt;li class="has-sub-menu"&gt;
              &lt;ul class="sub-menu"&gt;
  
                  &lt;li&gt;&lt;a href=""&gt;VGA&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Power&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Case&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Network &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;CPU&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;CPU FAN&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;&lt;a href=""&gt;products&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>