Menu: Add ui-front on submenus to address opacity messing up stacking order. Fixes #9650 - Menu: Disabled item visible through submenu on top

Author: jzaefferer

tests/visual/menu/menu.html

@@ -15,7 +15,15 @@
 			$( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
 		}
 
-		$( "#menu1, #menu2, #menu3, .menu4" ).menu({
+		$( "#menu1, #menu3, .menu4" ).menu({
+			select: logger
+		});
+
+		$( "#menu2" ).menu({
+			position: {
+				my: "left top",
+				at: "left+10 top-20"
+			},
 			select: logger
 		});
 
@@ -39,6 +47,7 @@
 	<style>
 		body { font-size:62.5%; }
 		.ui-menu { width: 200px; margin-bottom: 2em; }
+		.menu2-container { width: 220px; }
 		.menu4 { height: 200px; overflow-y: auto; overflow-x: hidden; }
 		.address-item { border-bottom: 1px solid #999; }
 		.address-header { display: block; margin-bottom: .2em; font-weight: bold; }
@@ -88,7 +97,7 @@ <h2>Inline with disabled items and submenus</h2>
 					<li>Salzburg</li>
 				</ul>
 			</li>
-			<li>Perch</li>
+			<li class="ui-state-disabled">Perch</li>
 		</ul>
 	</li>
 	<li class="ui-state-disabled">Amesville</li>

ui/jquery.ui.menu.js

@@ -147,7 +147,7 @@ $.widget( "ui.menu", {
 		this.element
 			.removeAttr( "aria-activedescendant" )
 			.find( ".ui-menu" ).addBack()
-				.removeClass( "ui-menu ui-widget ui-widget-content ui-menu-icons" )
+				.removeClass( "ui-menu ui-widget ui-widget-content ui-menu-icons ui-front" )
 				.removeAttr( "role" )
 				.removeAttr( "tabIndex" )
 				.removeAttr( "aria-labelledby" )
@@ -292,7 +292,7 @@ $.widget( "ui.menu", {
 
 		// Initialize nested menus
 		submenus.filter( ":not(.ui-menu)" )
-			.addClass( "ui-menu ui-widget ui-widget-content" )
+			.addClass( "ui-menu ui-widget ui-widget-content ui-front" )
 			.hide()
 			.attr({
 				role: this.options.role,