I'm very new to web dev (and stackoverflow), tried to make the dropdown with CSS only, but it didn't work. It may be messy because this is just one part of my project. Down below is the dropdown with "clickable" links, the doesn't work, tried to use the :focus + ul (with the pointer events all), but it doesn't get to the link either, is there a way to make my a tag to work? (Not an English speaker)
body {
background-color: blue;
}
.dropdown {
height: 10vh;
display: flex;
justify-content: space-around;
align-items: center;
width: 60%;
margin: auto;
}
.sneakers,
.headwear,
.streetwear,
.acessories,
.sales,
.all-btn {
position: relative;
}
.sneakers ul,
.headwear ul,
.streetwear ul,
.acessories ul {
position: absolute;
left: 50%;
background: white;
margin-top: 20px;
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
list-style: none;
opacity: 0;
visibility: visible;
transform: translateY(10px);
transition: 0.2s ease;
}
.sneakers a,
.headwear a,
.streetwear a,
.acessories a {
color: #222;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s;
}
.sneakers a:hover,
.headwear a:hover,
.streetwear a:hover,
.acessories a:hover {
font-weight: bold;
transform: scale(1.25);
transition: 0.3s;
color: rgb(199, 29, 129);
}
.sneakers li,
.headwear li,
.streetwear li,
.acessories li {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s;
}
.sneakers li:hover,
.headwear li:hover,
.streetwear li:hover,
.acessories li:hover {
background: #444;
transition: 0.3s;
}
.dropdown button,
.home,
.sales,
.all-btn {
text-decoration: none;
background: none;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
transition: 0.3s ease-out;
}
.dropdown button:hover {
color: rgb(199, 29, 129);
transform: scale(1.1);
transition: 0.3s;
letter-spacing: 2px;
}
.home:hover,
.sales:hover,
.all-btn:hover {
color: rgb(199, 29, 129);
transition: 0.3s ease-out;
}
.sneakers button:focus + ul,
.streetwear button:focus + ul,
.headwear button:focus + ul,
.acessories button:focus + ul {
pointer-events: all;
transform: translateX(-50%);
opacity: 1;
}<nav>
<div class="dropdown">
<button><a class="home" href="index.html">HOME</a></button>
<div class="sneakers">
<button>SNKRS</button>
<ul>
<li><a href="todos.html">Todos</a></li>
<li><a href="#">Nike</a></li>
<li><a href="#">Adidas</a></li>
<li><a href="#">Jordan</a></li>
<li><a href="#">Yeezys</a></li>
<li><a href="#">Puma</a></li>
</ul>
</div>
<div class="streetwear">
<button>STREETWEAR</button>
<ul>
<li><a href="#">Todos</a></li>
<li><a href="#">Camisetas</a></li>
<li><a href="#">Calças</a></li>
<li><a href="#">Bermudas</a></li>
<li><a href="#">Moletons</a></li>
<li><a href="#">Jaquetas</a></li>
<li><a href="#">Meias</a></li>
</ul>
</div>
<div class="headwear">
<button>HEADWEAR</button>
<ul>
<li><a href="#">Todos</a></li>
<li><a href="#">Bonés</a></li>
<li><a href="#">Toucas</a></li>
<li><a href="#">Buckets</a></li>
<li><a href="#">Durags</a></li>
</ul>
</div>
<div class="acessories">
<button>ACESSORIES</button>
<ul>
<li><a href="#">Todos</a></li>
<li><a href="#">Bolsas</a></li>
<li><a href="#">Mochilas</a></li>
<li><a href="#">Carteiras</a></li>
<li><a href="#">Chaveiros</a></li>
<li><a href="#">Adesivos</a></li>
</ul>
</div>
<button><a class="sales" href="sales.html">SALES</a></button>
<button><a class="all-btn" href="all.html">ALL</a></button>
</div>
</nav>