Hide element and trigger click event simultaneously

Question

I am trying to build a simple dropdown menu that shows up when hovering over a div. This dropdown should stay opened while the mouse is hovering the div or any of the dropdown elements. I have accomplished this only with CSS as you can see in the snippet below.

However, I'd expect two things to happen when the user clicks on one of the dropdown elements:

1. The dropdown menu is closed/hidden
2. A click event is triggered

I tried to use the :active pseudoclass to hide the dropdown menu. But if I do that, then the click event is not triggered.

How can I both hide the dropdown menu and trigger the click event?

function printConsole() { 
  console.log('Event triggered');
}

document.querySelectorAll('.shop').forEach(
  shop => shop.addEventListener('click', printConsole)
);

.shop-selector svg {
  padding: 2px;
  border-radius: 50%;
  background-color: orange;
  display: block;
  height: 2rem;
  width: 2rem;
}

.shop-selector svg:hover+.shop-dropdown {
  visibility: visible;
  opacity: 1;
}

.shop-selector .shop-dropdown {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
  z-index: 1;
  transition: all 0.7s;
  visibility: hidden;
  opacity: 0;
}

.shop-selector .shop-dropdown:hover {
  visibility: visible;
  opacity: 1;
}

.shop-selector .shop-dropdown:active {
  display: none;
}

.shop-selector .shop-dropdown .shop {
  margin: 5px 0 0;
  padding: 2px 5px;
  border-radius: 3px;
  background-color: orange;
}

<div class="shop-selector">
  <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><g><path d="M0,0h24v24H0V0z" fill="none"/><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></g></svg>
  <div class="shop-dropdown">
    <div class="shop">
      Shop Nameone
    </div>
    <div class="shop">
      Shop Nametwo
    </div>
    <div class="shop">
      Shop Namethree
    </div>
  </div>
</div>

Answer 1

The click will not work.Because Hover is done by mouse, therefore, try with mouse events like "mousedown"? ...let's check it.