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

[sirchote]

Alguien tiene alguna idea?

[cuasatar]

¿Y que navegador estas usando para el iPad? Las versiones de algunos navegadores para dispositivos moviles no soportan el mismo estandar css que la versión para webs. Por ejemplo la versión de Opera no soporta algunos css3 que ya soporta la versión web. Por ahí deberias empezar la búsqueda.

[joseoliveras]

Mucho código en la Css veo yo, prueba con este a ver si va, no tengo iPad, pero creo que te funcionará.

http://jsfiddle.net/joseoliveras/W884Z/

[sirchote]

Que sea tan largo debería afectar en algo? No creo no.

El código que me has pasado, seguramente a la que añada lo que necesito, será igual de largo, jejejeej

lo probaré adaptando a lo que necesito
gracias! :D