Menu despelgable css html no funciona en safari Ipad o Iphone

[jaguirre100]

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