$(function(){

var $navtop = jQuery('#nav ul'),
		bgPositiontop = $navtop.position(),
		$bgtop = $('<div class="navback"></div>').insertAfter($navtop);
		
	$bgtop.css({
	top : bgPositiontop.top - 1,
	left: bgPositiontop.left -105,
	/*width : $nav.width()*/
	width: "100px"
	}); 
	
	$("#nav li").hover (
	
		function(){
			$bgtop.stop(true).animate(
			{
				width: $(this).width(), 
				left: $(this).position().left + 5
			},
			{
				duration: 800, 
				easing: 'easeOutCirc', 
				queue: false
			})
		  }, 
		
		function(){
			$bgtop.stop(true).animate(
			{
				width: "100px", 
				left: $navtop.position().left - 105
			},
			{
				duration: 800, 
				easing: 'easeOutCirc', 
				queue: false
			})
		  }
	
	);

	var $nav = jQuery('#nav2 ul'),
		bgPosition = $nav.position(),
		$bg = $('<div class="navback"></div>').insertAfter($nav);
		
	$bg.css({
	top : bgPosition.top -1,
	left: bgPosition.left -105,
	/*width : $nav.width()*/
	width: "100px"
	}); 
	
	$("#nav2 li").hover (
	
		function(){
			$bg.stop(true).animate(
			{
				width: $(this).width() - 3, 
				left: $(this).position().left + 10
			},
			{
				duration: 800, 
				easing: 'easeOutCirc', 
				queue: false
			})
		  }, 
		
		function(){
			$bg.stop(true).animate(
			{
				width: "100px", 
				left: $nav.position().left - 105
			},
			{
				duration: 800, 
				easing: 'easeOutCirc', 
				queue: false
			})
		  }
	
	);
	
});