Problema con onmouseout

[alberthp]

Buenas,

Otra vez aquí... xD

Creía saber cómo funcionaban los eventos de onmouseover y onmouseout, pero estoy haciendo un menú con submenú y al colocar el onmouseover, ningún problema. Pero al poner onmouseout, me da problemas.

Primero explico el problema:

Al pasar el cursor por una opción del menú, debe verse el subapartado correspondiente. Si pasamos a otra opción, el subapartado anterior desaparecerá y aparecerá el nuevo. El problema viene cuando debe desaparecer el subapartado, si muevo el ratón hacia el subapartado, desaparece (Cuando no debería así, ¿cómo vamos a pulsar el enlace si desaparece?). En cambio, si muevo el ratón por todo el wrapper, ¡no desaparece! Es como si hiciese todo al revés...

¿Alguien me puede echar un cable?

Código HTML:

<nav id="menu">
   <ul>
<li class="nivel1"><a href="http://www.innovagames.com"><span class="fa fa-home"></span></a></li>
         <li id="reparaciones" onmouseover="getElementById('submenu').style.display='block'; getElementById('subRep').style.display='block';"><a href="#">REPARACIONES <span class="caret"></span></a></li>
         <li id="liberaciones"><a href="#">LIBERACIONES <span class="caret"></span></a></li>
         <li id="pedirCita"><a href="#">PEDIR CITA <span class="caret"></span></a></li>
         <li id="compraVenta"><a href="#">COMPRAVENTA <span class="caret"></span></a></li>
         <li id="tiendas"><a href="#">TIENDAS</a></li>
         <li id="contacto"><a href="#">CONTACTO <span class="caret"></span></a></li>
         <li><a href="#">+ <span class="caret"></span></a></li>
   </ul>
</nav> 

Código HTML:

<nav id="submenu" style="width:94%; margin:0 auto; display:none;" onmouseout="javascript:getElementById('submenu').style.display='none';javascript:getElementById('subRep').style.display='none';">
   <ul id="subRep" style="width:100%; font-size:14px; height:460px; display:none;">
         <div class="row2" style="width:100%; overflow:hidden;">
                    (aquí está la mierda)
         </div>
   </ul>
</nav> 

[Alexis88]

Podrías tener un mayor control con CSS. Mira este ejemplo que hice y adáptalo a lo que tienes.

Saludos

[alberthp]

Buenas,

Gracias por tu ayuda. Pero no me sirve, porque tú tienes los submenús en el interior del menú y yo lo tengo fuera. Que me dirás... pues mételo dentro. La cuestión es que no puedo, porque el submenú tiene el width de 100% y al meterlo dentro del menú (como has hecho tú), el apartado <li> se hace enorme y se descuadra. Y si lo dejo fuera, el hover no lo mostraría una vez el ratón se apartaso del <li> xD

[alberthp]

Una prueba en directo de cómo falla el onmouseout: http://www.innovagames.com/nuevaweb2/menu2.html

[Alexis88]

En realidad, pudiste usar el mismo menú y ampliar las dimensiones de las opciones, pero si realmente deseas seguir haciéndolo así, podrías probar añadiendo el evento onmouseover al bloque de id "subRep".

Código HTML:

<ul id="subRep" onmouseover="this.style.display='block'" onmouseout="this.style.display='none';" style="width:100%; font-size:14px; height:460px; display:none;">
 

De este modo, cuando se pose el puntero del mouse sobre este bloque, seguirá estando visible.

Saludos