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>