Menu: Add dividers using empty list items

Author: kborchers

tests/visual/menu/menu.html

@@ -78,6 +78,7 @@
 	<li><a href="#">Ada</a></li>
 	<li><a href="#">Adamsville</a></li>
 	<li><a href="#">Addyston</a></li>
+	<li></li>
 	<li>
 		<a href="#">Delphi</a>
 		<ul>

themes/base/jquery.ui.menu.css

@@ -10,6 +10,7 @@
 .ui-menu { list-style:none; padding: 2px; margin: 0; display:block; outline: none; }
 .ui-menu .ui-menu { margin-top: -3px; position: absolute; }
 .ui-menu .ui-menu-item { margin: 0; padding: 0; zoom: 1; width: 100%; }
+.ui-menu .ui-menu-divider { margin: 5px -2px 5px -2px; height: 0; font-size: 0; line-height: 0; }
 .ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; zoom: 1; font-weight: normal; }
 .ui-menu .ui-menu-item a.ui-state-focus,
 .ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; }

ui/jquery.ui.menu.js

@@ -260,7 +260,8 @@ $.widget( "ui.menu", {
 
 	refresh: function() {
 		// initialize nested menus
-		var menuId,
+		var menus,
+			menuId = this.menuId,
 			submenus = this.element.find( this.options.menus + ":not( .ui-menu )" )
 				.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
 				.hide()
@@ -271,8 +272,9 @@ $.widget( "ui.menu", {
 				});
 
 		// don't refresh list items that are already adapted
-		menuId = this.menuId;
-		submenus.add( this.element ).children( ":not( .ui-menu-item ):has( a )" )
+		menus = submenus.add( this.element );
+
+		menus.children( ":not( .ui-menu-item ):has( a )" )
 			.addClass( "ui-menu-item" )
 			.attr( "role", "presentation" )
 			.children( "a" )
@@ -283,6 +285,9 @@ $.widget( "ui.menu", {
 					return menuId + "-" + i;
 				});
 
+		// initialize unlinked menu-items as dividers
+        menus.children( ":not( .ui-menu-item )" ).addClass( "ui-widget-content ui-menu-divider" );
+
 		submenus.each( function() {
 			var menu = $( this ),
 				item = menu.prev( "a" );