Hola, me pueden ayudar
hice un menu desplegable usando html y css y use la propiedad -webkit. En safari y en chrome del pc me funciona pero si lo miro en safari del iphone o ipad no funciona.. que estoy haciendo mal.. quiero que me funcione la animacion en el ipad...
lo pueden ver en
www.itglobaltech.com.co/menudesplegablecss.html
el codigo css es el siguiente.. por favor ayudenme...
@charset "utf-8";
/* CSS Document */
ul {
list-style-type:none;
padding:0;
margin:0;
}
li {
display:inline-block;
padding:5px;
border:1px outset #F00;
color:#FFF;
background-color:#FF3300;
width:200px;
position:relative;
margin:-2px;
cursor:pointer;
}
#menuhorizontal {
text-align:center;
}
.submenu {
position:absolute;
top:38px;
left:1px;
display:none;
box-shadow:0px 0. 5px 5px #999999;
border-radius:0px 0px 5px 5px;
-webkit-animation-duration:0.8s;
}
.submenu li:last-child{
border-radius:0px 0px 5px 5px;
}
.submenu>li{
display:block;
-webkit-animation-duration:0.3s;
}
.submenu>li:hover{
background-color:#F60;
-webkit-transform:scale(1.05);
text-shadow:1px 1px 1px #333333;
z-index:2;
-webkit-animation-name:botonsubmenu;
}
@-webkit-keyframes botonsubmenu{
0%{
}
50%{
-webkit-transform:scale(1.1);
}
100%{
-webkit-transform:scale(1.05);
}
}
#menuhorizontal li:hover ul{
display:block;
-webkit-animation-name:submenu;
}
@-webkit-keyframes submenu{
0%{
opacity:0;
left:-150px;
}
50%{
-webkit-transform:skew(10deg);
box-shadow:-10px 4px 8px 5px #000000;
}
100%{
opacity:1;
left:1px;
}
}
#menuhorizontal li{
-webkit-transition:all 0.3s ease;
}
#menuhorizontal>li:hover{
background-color:#FF6600;
padding-top:10px;
box-shadow:0px 0px 4px #999999;
border-radius:5px 5px 0px 0px;
border:1px outset #FF6600;
color:#FFF;
text-shadow:1px 1px 1px #333333;
}
#menuhorizontal>li:first-child{
background-color:#FF6600;
padding-top:10px;
box-shadow:0px 0px 4px #999999;
border-radius:5px 5px 0px 0px;
border:1px outset #FF6600;
color:#FFF;
text-shadow:1px 1px 1px #333333;
}
