$(document).ready(function(){ 
	var subNavTimer;
	var sfTarget;
	var target;
	
	$('#nav a').mouseover(function(){
		sfTarget = $(this);
		target = $('#sub-nav-'+$(this).attr("rel"));
		$('.subNav').hide();
		target.show();
		target.css("top", $(this).position().top+30).css("left", $(this).position().left);
		clearTimeout(subNavTimer);
	}).mouseout(function(){
		subNavTimer=setTimeout(subNavFade,300);
	})
	
	$(".subNav").mouseover(function(){ 
		clearTimeout(subNavTimer);
		sfTarget.addClass('sfhover');
	}).mouseout(function(){ 
		subNavTimer=setTimeout(subNavFade,300);
		sfTarget.removeClass('sfhover');
	})
})

function subNavFade() {
	$('.subNav').hide();
}