Menú desplegable que no se abre en iPad

[sirchote]

Tengo un menú en una web, que me funciona correctamente para los navegadores IE, Chrome, Firefox en pc, Safari, Firefox y Chrome en mac, y en los dispositivos con android.

Pero al tratar de desplegar el menu en ipad, no funciona.

El código html del menú sería algo así:

Código HTML:

<div id="menu">

<ul>
<li class="nivel1_active"><a class="active_nivel1" href="index.php">Inicio</a></li>
<li class="nivel1"><a>Opcion 1</a>
<ul>
<li><a class="nivel1">Opcion 1.0</a></li>
 <li><a class="nivel0" href="x.php">Opcion 1.1</a></li>
 <li><a class="nivel0" href="x.php">Opcion 1.2</a></li>
 <li><a class="nivel0" href="x.php">Opcion 1.3</a></li>
 </ul>
 </li>
</ul>
</div> 

El CSS asociado sería el siguiente:

Código HTML:

#menu {  
text-align: center;
font-size: 12px;
width: 970px;
margin: 0px auto;
height: 000px;
z-index:10;
position:absolute;
}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 
{ 
float: left;
width: 105px;
color: #fff;
background-color: #585858;
margin-right: 1px;
}

#menu ul li.nivel1_active 
{
float: left;
width: 105px;
color: #585858;
background-color: #ffffff;
margin-right: 1px;
}

#menu ul li.nivel0 { float: left;
width: 107px;
background-color: #c0c0c0;
color: #000;
margin-right: 0px;
text-align:left;
padding-left:15px;
}

#menu ul li.nivel_index{ float: left;
width: 135px;
margin-right: 0px;
color: #fff;
background-color: #000000;

}

#menu ul li a {
display: block!important;
text-decoration: none;
border: solid 1px #585858;
padding-top:3px;
padding-bottom:3px;
position: relative;
color: #FFF;
display: none;
}

#menu ul li a.active_nivel1 {
color: #585858;
border: solid 1px #c0c0c0;
display: none;
padding-top:3px;
padding-bottom:3px;
}

#menu ul li:hover 
{
position: relative;
}
#menu ul li a:hover
 {
background-color: #BDBDBD;
color: #ffffff;
border: solid 1px #c0c0c0;
position: relative;
}


#menu ul li a.nivel0 {
display: block!important;
color: #000;
display: none;
position: relative;
}

#menu ul li ul {
display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {
display: block;
position: absolute;
left: 0px;
}

#menu ul li ul li a.nivel1 
{
width: 150px;
padding: 2px;
border-color: #000;
border-bottom: 0px;
color: #fff;
text-align: left;
padding-left:15px;
padding-right:15px;
background-color: #585858;
}

#menu ul li ul li a.nivel1b
{
width: 150px;
padding: 2px;
border-color: #000;
color: #fff;
text-align: left;
padding-left:15px;
padding-right:15px;
background-color: #585858;
}

#menu ul li ul li a.nivel0 
{
width: 150px;
padding: 2px;
border-color: #000;
color: #000;
background-color: #FFF;
border-bottom: 0px;
text-align:left;
padding-right:15px;
padding-left:15px;
}

#menu ul li ul li a.nivel0b 
{
width: 150px;
padding: 2px;
border-color: #000;
color: #000;
background-color: #FFF;
text-align:left;
padding-left:15px;
padding-right:15px;
}

#menu ul li ul li a.nivel0:hover 
{
/*border-top-color: #000;*/
background-color: #D8D8D8;
color: #000000;
position: relative;
}

#menu ul li ul li a.nivel0b:hover 
{
/*border-top-color: #000;*/
background-color: #D8D8D8;
color: #000000;
position: relative;
}

Hay algo que pueda hacer para que se despliegue correctamente en ipad?

Gracias