jQuery: offset() not working correctly before mouseover() event

[Aerden]

When setting the top and left properties of a div box with the jQuery offset() function after the mouseover event, everything works fine:

$(document).ready(function(){
	var main = $('#nav a[link*="fashion"]');
	var element = $('#nav div');
	
	if (!$('#content[src*="fashion"]').length
			&& !$('#content[src*="studio"]').length 
			&& !$('#content[src*="location"]').length){		
		main.mouseover(function(){			
			element.css({
				top: main.offset().top + main.height(),
				left: main.offset().left + main.width()*2/3
			});
			
			element.fadeIn(600);
		}).mouseout(function(){
			element.fadeOut(600);
		});
	} else {
		element.css({display: 'block'});
	}
});

But when it is put before the mouseover event it doesn't work.

$(document).ready(function(){
	var main = $('#nav a[link*="fashion"]');
	var element = $('#nav div');
	
	element.css({
		top: main.offset().top + main.height(),
		left: main.offset().left + main.width()*2/3
	});

	if (!$('#content[src*="fashion"]').length
			&& !$('#content[src*="studio"]').length 
			&& !$('#content[src*="location"]').length){		
		main.mouseover(function(){			
			element.fadeIn(600);
		}).mouseout(function(){
			element.fadeOut(600);
		});
	} else {
		element.css({display: 'block'});
	}
});

Any ideas why this is?