Hola a todos.
Estoy desarrollando una web en la que he creado un menú con su submenu correspondiente. Todo fácil hasta ahí. Una vez creado me he encontrado con que el submenú tiene un comportamiento no deseado ( si me sitúo encima de este y bajo el cursor se baja este submenu), debe ser una tontería pero por mas vueltas que le doy no veo el fallo.
Espero que me podáis ayudar!
Menu html
<nav>
<ul class="menu">
<li class="primero"><a class="active" href="">Inicio</a></li>
<li><a href="sobre-nosotros/">Sobre Nosotros</a></li>
<li><a href="">Servicios</a>
<ul class="menu">
<li><a href="servicios/ejemplo1">ejemplo1</a></li>
<li><a href="servicios/ejemplo2">ejemplo2</a></li>
</ul>
</li>
<li><a href="oportunidad-laboral/">Oportunidad Laboral</a></li>
<li class="last"><a href="contacto/">Contacto</a></li>
</ul>
</nav>
CSS del menu.
/***** menu *****/
.menu li {
float:left;
padding-right:2px;
background:url(../images/menu-spacer.gif) right top repeat-y;
}
.menu li a {
display:block;
font-size:22px;
font-weight:400;
line-height:2em;
padding: 6px 42px 6px 42px;
color:#fff;
text-transform:capitalize;
letter-spacing:-1px;
background: #4484CA;
}
.menu li.last a {
padding:6px 47px 6px 47px;
border-radius:0 9px 9px 0;
-moz-border-radius:0 9px 9px 0;
-webkit-border-radius:0 9px 9px 0;
}
.menu li.primero a {
padding: 6px 50px 6px 46px;
border-radius:9px 0px 0px 9px;
-moz-border-radius:9px 0px 0px 9px;
-webkit-border-radius:9px 0px 0px 9px;
}
.menu li a.active,
.menu > li > a:hover {background-color:#222;color: white;}
/***** submenu *****/
ul.menu li ul {display:none;position:fixed;margin-top:0px;z-index:50;width:40px;/*border-radius:10px;*/}
.menu li:hover > ul {display:block;z-index:999;height:30px;background:none;}
Un saludete!