Cambiar la propiedad zindex con un menu a un contenedor de divs

[lovecom45]

¡Hola amigos buen día!

Acudo a pedirles ayuda ya que no he logrado resolver un problema con la propiedad z.index y jQuery.


Mi problema es el siguiente:

Tengo un menú conformado po el siguiente código

Código:

		<div  id="categoria_list">
			<ul>
  					<li><a href="#"> Secuenciador de 1 canal </a></li>
  					<li><a href="#"> Controlador de temperatura </a></li>
  					<li><a href="#"> Programador serial de PIC&acute;s </a></li>
					<li><a href="#"> Timmer de 2 tiempos digital con rel&eacute; </a></li>
  					<li><a href="#"> Driver para motor PAP unipolar </a></li>
  					<li><a href="#"> Generador de patrones de video </a></li>
  					<li><a href="#">Tarjeta de desarrollo para PIC16FXXX </a></li>
  					<li><a href="#"> Secuenciador de 6 canales </a></li>
  					<li><a href="#"> Secuenciador de 12 canales C.A. </a></li>
  					<li><a href="#"> Driver para motor PAP bipolar </a></li>
  					<li><a href="#"> Flash B</a></li>
  					<li><a href="#"> Flash C</a></li>			
			</ul>
	</div>

Y este es el código CSS que tiene ese menú:

Código:

#categoria_list {
	list-style:none;
	margin:0;
	padding:0 0 0 0;
	float:left;
	width:350px;
	height:auto;
	position:static;
	/*sombra interna*/ 
	-moz-box-shadow:inset 0 0 10px #000000;
	-webkit-box-shadow:inset 0 0 10px #000000;
	box-shadow:inset 0 0 10px #000000;
	/*termina sombra interna*/

}

#categoria_list li {
	list-style:none;
	padding:2px 0 0 0;

}

#categoria_list ul {
	list-style:none;
	padding:0px;
	margin:0px;

}

#categoria_list li a{
	width:320px;
	height:30px;
	display:block;
	list-style: disc;
	text-decoration: none;
	padding: 10px 0 0 35px; 
	font-family: 'Nevi',Helvetica,Arial,sans-serif;
	font-size:14px;
	color: #999999;
	text-shadow:#333333 1px 1px 1px;
	font-weight:bold;
	background-image:url(../images/viñeta.png);
	background-repeat:no-repeat;

}

#categoria_list li a:hover{
	width:315px;
	height:30px;
	display:block;
	list-style: disc;
	text-decoration: none;
	background-color:#303030;
	border-top-color:#666666;
	border-top-style:solid;
	border-top-width:1px;
	border-bottom-color:#000000;
	border-bottom-style:solid;
	border-bottom-width:1px;
	padding: 10px 0 0 35px; 
	font-family: 'Nevi',Helvetica,Arial,sans-serif;
	font-size:14px;
	color: #ffffff;
	text-shadow:#333333 1px 1px 1px;
	font-weight:bold;	
	background-image:url(../images/viñeta.png);
	background-repeat:no-repeat;
}

En la página tengo una capa llamado "main_container" en el cual tengo todas las capas que contienen la información de cada produccto que se encuentra en el menu (una por una) con un zindex de 5 a 20. Lo que necesito es que por ejemplo el artículo primero del menu le asocio un zindex de 1 y así sucesivamente pata que cuando le de click al artículo en el menú aparesca en el contenedor la capa correspondiente.

Eso es lo que no he podido resolver ya que no conozco mucho el jQuery, si alguien me pudiera echar una mano se la agradecería mucho.


Sin más por ahora me despido agradeciendo de antemano su ayuda