Pseudo-Class:focus-within does not work correctly

I use the pseudo-class:focus-within 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.

li class="has-sub-menu" when I click on it to show the ul class="sub-menu" it get disappear.

Can anybody help me, please?

here are my HTML and CSS codes.

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;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <ul>
        <li class="has-sub-menu">
            <ul class="sub-menu">

                <li><a href="">VGA</a></li>
                <li><a href="">Power</a></li>
                <li><a href="">Case</a></li>
                <li><a href="">Network </a></li>
                <li><a href="">CPU</a></li>
                <li><a href="">CPU FAN</a></li>

            </ul><a href="">products</a>
        </li>
    </ul>
</body>

</html>

Solution

The code uses anchor tag elements so as to have a focusable element within the li elements.

The problem with this, alongside the empty href attribute, is that it focuses (so we see the sub menu) but then immediately moves to the link (which is empty) and unfocuses. So we see a flash of the sub menu then it disappears.

So what can we do to put a focusable element into the li element?

MDN has this advice:

onclick events Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .

These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

Use a button instead. In general, you should only use a hyperlink for navigation to a real URL.

So this snippet uses the code given in the question, changing the a elements for buttons, and removing the background-color and border from the button styling.

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;
}

.has-sub-menu button {
  background-color: transparent;
  border: none;
}

<ul>
  <li class="has-sub-menu">
    <ul class="sub-menu">

      <li><a href="">VGA</a></li>
      <li><a href="">Power</a></li>
      <li><a href="">Case</a></li>
      <li><a href="">Network </a></li>
      <li><a href="">CPU</a></li>
      <li><a href="">CPU FAN</a></li>

    </ul><button>products</button>
  </li>
</ul>