My href is not working

So, i’ve made a dropdown menu animation so when i click on “Media”, it is appearing a new menu, with “Video” and “Imagini”. The problem is that when I click on them, they don’t send me to the link page. There no probs in html document, and I think it is something in my CSS doc, so I’ll send both.
Here’s my HTML snippet:

<div class="products">
						
						<button class="bit">Media <i class="fa fa-caret-down"></i></button>
						<ul>
							<li><a href="mh.html" target="_blank">Video</a></li>
							<li><a href="https://imagecolorpicker.com/" target="_blank">Imagini</a></li>
						</ul>
					
					</div>

And my css, which is much longer:


.products {
  position: relative;
}


.products ul {
  font-size: 13px;
  margin-top: 10px;
  position: absolute;
    display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  width: 150px;
  height: 150px;
  background: white;
  left: 0px;
  list-style: none;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.4s ease;
}


.inf li ,
.products li {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition:0.5s;
}



.products li:hover {
	cursor:pointer;
  background-color: #e6e6e6;
  color: black;

}


.inf a ,
.products a {
  color: black;
  text-decoration: none;
}


.dropdown button,
.home {
  background: none;
  text-decoration: none;
  border: none;
  color: white;
  font-size: 13px;
  cursor: pointer;
}


.products button:focus + ul {

  pointer-events: all;
  transform: translateY(0px);
  opacity: 1;

}

looks like

.products ul {
  pointer-events: none;
}

supress the click event

1 Like

thank you, didnt notice that.

i suppose you placed that rule so the links cant be clicked when they are not visible. You would need to apply that rule only when they are not visible, or you should change the hide mechanic, for example display: none which should prevent them from being click-able