Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

Reply To: Background and submenu position

Home Forums Older releases 1.0.x Background and submenu position Reply To: Background and submenu position


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):


$(function() {
	var $mainMenu = $('#main-menu'),
		$underlay = $('<div id="main-menu-underlay"></div>').appendTo('body');
		'show.smapi': function(e, menu) {
			var $sub = $(menu),
				$li = $sub.parent(),
				obj = $'smartmenus'),
				mainMenuOffset = $mainMenu.offset();
			// position deeper level sub menus right below the main menu
			if ($sub.dataSM('level') > 2) {
				$sub.css('margin-top', + obj.getHeight($mainMenu) - $li.offset().top - obj.getHeight($li));
			// show/position underlay
			$underlay.stop(true, true);
			if (!$':visible')) {
				$underlay.css({ 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 = $'smartmenus');
			if (!obj.visibleSubMenus.length) {


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

Please let me know if you have any questions.