Menu Vertical CSS + JQuery fica atras dos slides

[Paulo Victor Binatto 1]

Bom dia pessoal!

 

Estou desenvolvendo um site que necessita de um menu vertical e um banner rotativo JQuery, porém quando o slide está funcionando, ao clicar no menu vertical, ele fica atras do slide.

 

Alguma dica?

 

Para o Slider estou usando o Nivo.

 

Segue o código. Desde já agradeço.

 

<style>
.menu_vertical {
width:174px;
float:left;	
position:absolute;
}
</style>
<script type="text/javascript">
 $('img.menu_class').click(function () {
$('ul.the_menu').slideToggle('slow');
 });
</script>

<div class="menu_vertical">
   <img src="imagens/bg_menu_vertical.png" class="menu_class" />
   <ul class="the_menu">
   <li><a href="#">Brincos</a></li>
   <li><a href="#">Anéis</a></li>
   <li><a href="#">Colares</a></li>
   <li><a href="#">Pulseiras</a></li>
   <li><a href="#">Pingentes</a></li>
   <li><a href="#">Conjuntos</a></li>
   <li><a href="#">Correntes</a></li>
   <li><a href="#">Acessórios</a></li>
   <li><a href="#">Novidades</a></li>
   </ul>
</div>

[William Bruno 1501]

trabalhe com z-index amigo.

 

deixe para o menu um z-index maior que o do slide. Note que z-index só funciona em elementos q possuem um valor diferente do default(static) para a propriedade position.(relative, absolute, fixed)

[Lucas Almeida_46849 0]

z-index serve para deixar um objeto na frente de outro,

.objeto {
position:absolute;
z-index:1
}

o z-index, só funciona com objeto posicionado.

o valor 1 é a posição que o objeto se encontra

 

isso, você precisa adicionar a propriedade z-index dentro do estilo dos dois objetos :grin:

 

no seu caso ficaria assim

.menu_vertical {
position:absolute;
z-index:20;
}
#bannerRotarivo {
position:absolute.
z-index:10;
}