Hola a todos,
estoy creando un menu deplegable usando este javascript
Código PHP:
<script type="text/javascript">
function mainmenu(){
$(" #nav ul ").css({display: "none"});
$(" #nav li").hover(function(){
$(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(400);
},function(){
$(this).find('ul:first').slideUp(400);
});
}
$(document).ready(function(){
mainmenu();
});
</script>
y con esta estructura
Código PHP:
<div id="menu">
<ul id="nav">
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a>
<ul class="submenu">
<li><a href="#">Marketing</a>
<ul class="subsubmenu">
<li><a href="#">Precios</a></li>
<li><a href="#">Consultas</a></li>
</ul>
</li>
<li><a href="#">Mercadotecnia</a></li>
<li><a href="#">Encuestas</a></li>
</ul>
</li>
<li><a href="#">Nosotros</a>
<ul class="submenu">
<li><a href="#">Vision</a></li>
<li><a href="#">Mision</a></li>
</ul>
</li>
<li><a href="#">Otros</a></li>
<li><a href="#">Contactanos</a></li>
</ul>
</div>
Me funciona pero a media, me explico. Al pasar el raton por encima cambia bien de color el fondo del boton pero al irme hacia el submenu vuelve a su estado original.
Alguien me pordia indicar como solucionarlo? le he dado bastantes vueltas pero no lo consigo.
Aclaro que no soy un experto en javascript y lo que he echo ha sido leyendo y leyendo mas.
Aqui dejo el css del menu
Código PHP:
#nav {
list-style:none;
}
#nav li {
float:left;
background: #282728;
}
#nav li a {
display:block;
padding:7px 10px;
text-decoration:none;
color:#CCCCCC;
font-weight:bold;
}
#nav li a:hover {
color:#FC9000;
background: #EFF0F1;
-moz-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
}
#nav li a:active {
color:#FC9000;
background: #EFF0F1;
-moz-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
}
/* Submenu */
#nav ul.submenu {
border:1px solid #EFF0F1;
padding:5px; position:absolute;
list-style:none;
background-color:#EFF0F1;
}
#nav ul.submenu li {
float:none;
background-image:none;
border-bottom:1px solid #EFF0F1;
width:200px;
}
#nav ul.submenu li a {
color: #282728;
-moz-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
}
#nav ul.submenu li a:hover {
color: #FC9000;
}
/* Subsubmenu */
#nav ul.subsubmenu { border:1px solid #000000; padding:5px; position:absolute; list-style:none; background-color:#333333; margin-left:150px; margin-top:-30px;}
#nav ul.subsubmenu li { float:none; background-image:none; border-bottom:1px solid #999999; min-width:200px;}