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