nav bar submenu to open below mainmenu

[J2SK]

I have my submenus positioned and opened below main menu on the page, but on mouse hover within menu, it again overlaps the main menu.

$(function() {   
	var $mainMenu = $('#main-menu');
	$mainMenu.bind({
		'show.smapi': function(e, menu) {
			var $sub = $(menu),
				$li = $sub.parent(),
				obj = $mainMenu.data('smartmenus'),
				mainMenuOffset = $mainMenu.offset();
			
			// position deeper level sub menus right below the main menu
			if ($sub.dataSM('level') > 2 && $(window).scrollTop()<(mainMenuOffset.top + obj.getHeight($mainMenu))) {
				$sub.css('margin-top', mainMenuOffset.top + obj.getHeight($mainMenu) - $li.offset().top - obj.getHeight($li));
			}
		}
	});
}); 

If I take the mouse pointer out of the categories menu and then select any cat(cat1, cat2..)sub cat always open below the blue main menu, but when i jump from cat 1 to cat 2 without taking the mouse pointer out of the categories menu box it overlap on blue main menu again.