Problema con efecto de menu,

[benllycast]

Hola a todos!!!

les describo el problema que tengo:

estoy practicando con un efecto basico para un menu con css3, javascript, con etiquetas ul , li, y varios links de pruebas. las etiquetas li tienen unas dimensiones ya definidas (colocados por mi) y colores de fondo aleatorios, cuando paso el puntero por encima de las li, estas crecen en tamaño y ademas se mueve 10px arriba de su posicion original.

el problema esta en que cuando paso el puntero por los enlaces dentro de las li, estas regresan a su tamaño y posicion original.

¿como evito esta situacion?

Aqui esta el codigo css, javascript, y html para mayor orientacion.

Código:

ul{
	background: #555;
	position: relative;
	top: 30px;
	left: 50px;
	display: inline-block;
	vertical-align: top;
	zoom: 1; /* Fix for IE7 */
	*display: inline; /* Fix for IE7 */
}

ul li.item{
	box-shadow: -5px -5px 15px #888888;
	width: 100px;
	height: 40px;
	margin: 0 0;
	padding: 5px 5px;
	position: absolute;
	border: 1px solid black;
	border-radius: 10px 0;
	opacity: 0.5;
	transform: skew(-10deg,-20deg);
	-ms-transform: skew(-10deg,-20deg); /* IE 9 */
	-webkit-transform: skew(-10deg,-20deg); /* Safari and Chrome */
	-o-transform: skew(-10deg,-20deg); /* Opera */
	-moz-transform: skew(-10deg,-20deg); /* Firefox */
	list-style-type: none;
}
ul li.item:hover{
	width: 150px;
	height: 60px;
	opacity: 1;
	box-shadow: none;
};

ul li a{
	font: 1em sans-serif;
	text-decoration: none;
}

Código:

jQuery(document).ready(function() {
	$('.item').each(function(index, elemento){
		var r = Math.round(255*Math.random());
		var b = Math.round(255*Math.random());
		var g = Math.round(255*Math.random());
		var color = "rgb("+r+","+b+","+g+")";
		console.log(color);
		$elemento = $(elemento);
		$elemento.css({
			'z-index':index,
			'background-color':color,
			//'left':""+10*index+"px",
			'top':""+30*index+"px",
		})
		.mouseover(function(e){
			var pos = $(e.target).position();
			pos.top += 10;
			$(e.target).css('top',pos.top);
		})
		.mouseout(function(e){
			reset_posicion();
		});
	});

});

var reset_posicion = function(){
	$('.item').each(function(index,elemento){
		$(elemento).css('top',""+30*index+"px");
	});
		
}

Código:

<ul>
	<li class="item"><a href="#" title="android">Android</a></li>
	<li class="item"><a href="#" title="android">PHP</a></li>
	<li class="item"><a href="#" title="android">Node.js</a></li>
	<li class="item"><a href="#" title="android">Wordpress</a></li>
	<li class="item"><a href="#" title="android">Python</a></li>
</ul>