Reply To: Background and submenu position

[admin]

Hello, yes it could be achieved via the API with some additional code. For example, the following should work (add it somewhere on your page):

JS:

$(function() {
	var $mainMenu = $('#main-menu'),
		$underlay = $('<div id="main-menu-underlay"></div>').appendTo('body');
	$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) {
				$sub.css('margin-top', mainMenuOffset.top + obj.getHeight($mainMenu) - $li.offset().top - obj.getHeight($li));
			}
			// show/position underlay
			$underlay.stop(true, true);
			if (!$underlay.is(':visible')) {
				$underlay.css({ top: mainMenuOffset.top + obj.getHeight($mainMenu), left: mainMenuOffset.left, width: obj.getWidth($mainMenu), height: obj.getHeight($sub) }).show();
			} else {
				// get max height of visible sub menus
				var maxHeight = 0;
				$.each(obj.visibleSubMenus, function(index, $sub) {
					maxHeight = Math.max(maxHeight, obj.getHeight($sub));
				});
				$underlay.css('height', maxHeight);
			}
		},
		'hide.smapi': function(e, menu) {
			var obj = $mainMenu.data('smartmenus');
			if (!obj.visibleSubMenus.length) {
				$underlay.fadeOut(250);
			}
		}
	});
});

CSS:

#main-menu-underlay {
	display: none;
	position: absolute;
	background: red;
}

Please let me know if you have any questions.