Hola a todos.
Estoy teniendo un pequeño problema al utilizar un menu creado en jquery y un slideshow.
El problema es que el slideshow esta justo debajo de el menu, el cual es desplegable. y cuando el menu se despliega se coloca por detras del slide, por mas que cambio de slideshow me pasa lo mismo. no se que hacer. Necesito su ayuda.
Incluso si el menu esta en css solamente igual se coloca detras del slide
El Slide es este [URL="http://slidesjs.com/"]http://slidesjs.com/[/URL].
El Css del menu es este:
Código:
#menu{
position:absolute;
}
#menu, #menu ul{
margin:0;
padding:0;
list-style:none;
text-align:center;
}
#menu li{
float:left;
}
#menu li a{
background-color:#F00;
border-radius:10px 10px 0 0;
}
#menu li li a{
background-color:#9C0;
border-radius:0 0 0 0;
filter: alpha(opacity=50); opacity: .5;
}
#menu li li:hover{
background-color:#9C0;
border-radius:0 0 0 0;
}
#menu li li a:last{
border-radius:0 0 10px 10px;
}
#menu a{
display:block;
width:120px;
padding:5px;
height:20px;
text-decoration:none;
}
#menu li ul{
position:absolute;
left:-999em;
width:120px;
}
#menu li:hover ul, #menu li ul:hover{
left:auto;
}
El javascript para el menu que utiliza jquery es este:
Código:
$(document).ready(function(){
$("#menu li ul").css({display:"none", left:"auto"});
$("#menu li").hover(function(){
$(this).find("ul").stop(true, true).fadeIn("slow");
}, function(){
$(this).find("ul").stop(true, true).fadeOut("fast");
});
});
Y el menu es asi:
Código:
<ul id="menu">
<li><a href="#" > Menu 1</a>
<ul>
<li><a href="#"> Sub-menu1 </a></li>
<li><a href="#"> Sub-menu1 </a></li>
<li><a href="#"> Sub-menu1 </a></li>
<li><a href="#"> Sub-menu1 </a></li>
</ul>
</li>
<li><a href="#"> Menu 2 </a>
<ul>
<li><a href="#"> Sub-menu2 </a></li>
<li><a href="#"> Sub-menu2 </a></li>
<li><a href="#"> Sub-menu2 </a></li>
<li><a href="#"> Sub-menu2 </a></li>
</ul>
</li>
</ul>
Si le quitan jquery al menu igual funciona.