niestety nie moge uzyc js
temat polega na tym, ze musze miec obrazkowe menu na stronie lecz nie wchodza linki na rozwinietych obrazkach. podejrzewam, ze chodzi o to iz klikniecie zamyka menu zanim otworzy sie link. tutaj chcialem poradzic sobie opoznieniem animacji, lecz to tez nie dziala.
moze sa lepsze sposoby na rozwiazanie tematu?
wielka prosba o pomoc
<style>
.kat-imgs {
height: 105px;
width: 210px;
padding: 5px;
margin: 5px;
border: 1px solid #ececec;
box-shadow: 1px 1px 3px 0px #ececec;
}
.rozwijacz {
cursor: pointer;
transition-property: height;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 0.5s;
}
.rozwijacz:focus {
height: 0px;
}
.ukrytydiv {
display: none;
}
.rozwijacz:focus + .ukrytydiv {
display: flex;
flex-direction: column;
background-color: #fff;
}
.kategorie {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.katdiv {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<div class="katdiv">
<div class="kategorie">
<div class="kat-imgs">
<a href="https://literaturka.pl/pl/c/Przyrodnicze/74"><img src="https://literaturka.pl//userdata/public/assets//zaint1-przyroda.svg" alt="Zainteresowania - Przyroda" /></a>
</div>
<div class="kat-imgs">
<a href="https://literaturka.pl/pl/c/MatematykaLiczenie/104"><img src="https://literaturka.pl//userdata/public/assets//zaint2-matematyka.svg" alt="Zainteresowania - Matematyka" /></a>
</div>
<div class="kat-imgs">
<a href="https://literaturka.pl/pl/c/Kosmos/72"><img src="https://literaturka.pl//userdata/public/assets//zaint3-kosmos.svg" alt="Zainteresowania - Kosmos" /></a>
</div>
</div>
<div class="rozwijacz" tabindex="1">
<div class="kat-imgs">
<img src="https://literaturka.pl//userdata/public/assets//zaint15-rwd.svg" alt="Zainteresowania - Zobacz wszystkie pozycje z kategorii" />
</div>
</div>
<div class="ukrytydiv">
<div class="kat-imgs">
<a href="https://literaturka.pl/pl/c/Cialo-czlowieka/125"><img src="https://literaturka.pl//userdata/public/assets//zaint4-ludzkiecialo.svg" alt="Zainteresowania - Ludzkie ciało" /></a>
</div>
<div class="kat-imgs">
<a href="https://literaturka.pl/pl/c/Muzyka/145"><img src="https://literaturka.pl//userdata/public/assets//zaint5-muzyka.svg" alt="Zainteresowania - Muzyka" /></a>
</div>
<div class="kat-imgs">
<a href="https://literaturka.pl/pl/c/Dinozaury/86"><img src="https://literaturka.pl//userdata/public/assets//zaint6-dinozaury.svg" alt="Zainteresowania - Dinozaury" /></a>
</div>
<div class="kat-imgs">
<a href="https://literaturka.pl/pl/c/KsiezniczkiRycerzeZamkiSmoki/70"><img src="https://literaturka.pl//userdata/public/assets//zaint7-ksiezniczki.svg" alt="Zainteresowania - Księżniczki, rycerze, zamki, smoki"</a>
</div>
<div class="kat-imgs">
<a href="https://literaturka.pl/pl/c/Pojazdy%2C-maszyny%2C-plac-budowy/73"><img src="https://literaturka.pl//userdata/public/assets//zaint8-pojazdy.svg" alt="Zainteresowania - Pojazdy, maszyny, plac budowy" /></a>
</div>
<div class="kat-imgs">
<a href="https://literaturka.pl/pl/c/Konie/126"><img src="https://literaturka.pl//userdata/public/assets//zaint9-konie.svg" alt="Zainteresowania - Konie" /></a>
</div>
<div class="kat-imgs">
<a href="https://literaturka.pl/pl/c/Psy/140"><img src="https://literaturka.pl//userdata/public/assets//zaint10-psy.svg" alt="Zainteresowania - Psy" /></a>
</div>
<div class="kat-imgs">
<a href="https://literaturka.pl/pl/c/Roboty/71"><img src="https://literaturka.pl//userdata/public/assets//zaint11-roboty.svg" alt="Zainteresowania - Roboty" /></a>
</div>
<div class="kat-imgs">
<a href="https://literaturka.pl/pl/c/PotworyDuchy/69"><img src="https://literaturka.pl//userdata/public/assets//zaint12-potwory.svg" alt="Zainteresowania - Potwory i duchy" /></a>
</div>
<div class="kat-imgs">
<a href="https://literaturka.pl/pl/c/Sluzby-ratunkowe/136"><img src="https://literaturka.pl//userdata/public/assets//zaint13-ioio.svg" alt="Zainteresowania - Służby ratunkowe" /></a>
</div>
<div class="kat-imgs">
<a href="https://literaturka.pl/pl/c/Historia/103"><img src="https://literaturka.pl//userdata/public/assets//zaint14-historia.svg" alt="Zainteresowania - Historia" /></a>
</div>
</div>
</div>
ajsdijvasdiasiudsaiugd