Witam
Mam zrobione menu za pomocą CSS które działa w ten sposób, że po najechaniu myszką na grafikę ta zmienia się w listę i pojawiają się dwa linki ( dla przykładu mam grafikę samochodu pod nią podpis samochody i po najechaniu na samochód pojawiają się "nowe" i "używane"). Na komputerze wszystko działa poprawnie, ale już w przypadku urządzeń mobilnych nie. Na androidzie po kliknięciu na grafikę w zależności czy dotkniemy powyżej czy poniżej połowy obrazka od razu przechodzi się na kolejną podstronę chyba, że kliknie się w podpis pod grafiką wtedy pojawiają się linki i można kliknąć. Natomiast w przypadku iphonów hover w ogóle nie działa. Więc moje pytanie jest takie co powinienem użyć lub jak przebudować skrypt żeby menu działało na wszystkich urządzeniach w taki sposób żeby po kliknięciu pojawiało się menu do wyboru?
HTML:
<a href="#"><div class="samochody">
<ol>
<li><a href="nowe.php?page=1"><b>Nowe</b></a></li>
<li><a href="uzywane.php?page=1"><b>Używane</b></a></li>
</ol>
<div class="podpis">Samochody</div></div></a>
CSS:
ol
{
padding:0;
margin:0;
list-style-type:none;
text-align:center;
margin-top:30px;
line-height: 40px;
display:none;
}
ol a
{
color:#ffffff;
font-family: 'Roboto', sans-serif;
text-decoration:none;\
}
li:hover a
{
color:#6F0;
}
.samochody
{
width:150px;
height:150px;
padding-top:10px;
padding-bottom:20px;
float:left;
margin-right:20px;
margin-bottom:10px;
text-align:center;
text-decoration:none;
font-family: 'Roboto', sans-serif;
background-image:url(images/samochody.png);
background-repeat:no-repeat;
}
.samochody:hover
{
background-image:url(images/tlo_kolo.png);
}
.samochody:hover > ol
{
display:block;
}
.samochody:hover .podpis
{
top: 40px;
}