diff --git a/tests/visual/menu/contextmenu.html b/tests/visual/menu/contextmenu.html
new file mode 100644
index 000000000..451cd3853
--- /dev/null
+++ b/tests/visual/menu/contextmenu.html
@@ -0,0 +1,175 @@
+<!doctype html>
+<html>
+<head>
+	<title>Menu Visual Test: Default</title>
+	<link rel="stylesheet" href="../visual.css" type="text/css" />
+	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
+	<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
+	<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+	<script type="text/javascript">
+	$(function() {
+		$.fn.themeswitcher && $('<div/>').css({
+			position: "absolute",
+			right: 10,
+			top: 10
+		}).appendTo(document.body).themeswitcher();
+		
+		var menus = $("#menu1, #menu2").menu({
+			selected: function(event, ui) {
+				$("#log").append("<div>Selected " + ui.item.text() + "</div>");
+			}
+		}).hide();
+		
+		
+		$("button").click(function(event) {
+			// TODO required to prevent the click handler below from handling this event
+			event.stopPropagation();
+			$("#menu" + this.id).menu("deactivate").show().position({
+				my: "left top",
+				at: "right top",
+				of: event.pageX > 0 ? event : this
+			});
+			$(document).one("click", function() {
+				menus.hide();
+			})
+		}).keydown(function(event) {
+			var menu = $("#menu" + this.id).data("menu");
+			if (menu.widget().is(":hidden"))
+				return;
+			event.stopPropagation();
+			switch (event.keyCode) {
+			case $.ui.keyCode.PAGE_UP:
+				menu.previousPage();
+				break;
+			case $.ui.keyCode.PAGE_DOWN:
+				menu.nextPage();
+				break;
+			case $.ui.keyCode.UP:
+				menu.previous();
+				break;
+			case $.ui.keyCode.DOWN:
+				menu.next();
+				event.preventDefault();
+				break;
+			case $.ui.keyCode.ENTER:
+			case $.ui.keyCode.TAB:
+				menu.select();
+				menu.widget().hide();
+				event.preventDefault();
+				break;
+			case $.ui.keyCode.ESCAPE:
+				menu.widget().hide();
+				break;
+			default:
+				clearTimeout(menu.filterTimer);
+				var prev = menu.previousFilter || "";
+				var character = String.fromCharCode(event.keyCode);
+				var skip = false;
+				if (character == prev) {
+					skip = true;
+				} else {
+					character = prev + character;
+				}
+				
+				var match = menu.widget().children("li").filter(function() {
+					return new RegExp("^" + character, "i").test($(this).text());
+				});
+				var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;
+				if (!match.length) {
+					character = String.fromCharCode(event.keyCode);
+					match = menu.widget().children("li").filter(function() {
+						return new RegExp("^" + character, "i").test($(this).text());
+					});
+				}
+				if (match.length) {
+					menu.activate(match);
+					if (match.length > 1) {
+						menu.previousFilter = character;
+						menu.filterTimer = setTimeout(function() {
+							delete menu.previousFilter;
+						}, 1000);
+					} else {
+						delete menu.previousFilter;
+					}
+				} else {
+					delete menu.previousFilter;
+				}
+			}
+		});
+	});
+	</script>
+	<style>
+		body { font-size:62.5%; }
+		.ui-menu { width: 200px; position: absolute; }
+		#menu2 { height: 200px; overflow: auto; }
+	</style>
+</head>
+<body>
+	
+<button id="1">Show context menu 1</button>
+
+<ul id="menu1">
+	<li><a href="#">Amsterdam</a></li>
+	<li><a href="#">Anaheim</a></li>
+	<li><a href="#">Cologne</a></li>
+	<li><a href="#">Frankfurt</a></li>
+	<li><a href="#">Magdeburg</a></li>
+	<li><a href="#">Munich</a></li>
+	<li><a href="#">Utrecht</a></li>
+	<li><a href="#">Zurich</a></li>
+</ul>
+
+<ul id="menu2">
+	<li><a href="#">Aberdeen</a></li>
+	<li><a href="#">Ada</a></li>
+	<li><a href="#">Adamsville</a></li>
+	<li><a href="#">Addyston</a></li>
+	<li><a href="#">Adelphi</a></li>
+	<li><a href="#">Adena</a></li>
+	<li><a href="#">Adrian</a></li>
+	<li><a href="#">Akron</a></li>
+	<li><a href="#">Albany</a></li>
+	<li><a href="#">Alexandria</a></li>
+	<li><a href="#">Alger</a></li>
+	<li><a href="#">Alledonia</a></li>
+	<li><a href="#">Alliance</a></li>
+	<li><a href="#">Alpha</a></li>
+	<li><a href="#">Alvada</a></li>
+	<li><a href="#">Alvordton</a></li>
+	<li><a href="#">Amanda</a></li>
+	<li><a href="#">Amelia</a></li>
+	<li><a href="#">Amesville</a></li>
+	<li><a href="#">Aberdeen</a></li>
+	<li><a href="#">Ada</a></li>
+	<li><a href="#">Adamsville</a></li>
+	<li><a href="#">Addyston</a></li>
+	<li><a href="#">Adelphi</a></li>
+	<li><a href="#">Adena</a></li>
+	<li><a href="#">Adrian</a></li>
+	<li><a href="#">Akron</a></li>
+	<li><a href="#">Albany</a></li>
+	<li><a href="#">Alexandria</a></li>
+	<li><a href="#">Alger</a></li>
+	<li><a href="#">Alledonia</a></li>
+	<li><a href="#">Alliance</a></li>
+	<li><a href="#">Alpha</a></li>
+	<li><a href="#">Alvada</a></li>
+	<li><a href="#">Alvordton</a></li>
+	<li><a href="#">Amanda</a></li>
+	<li><a href="#">Amelia</a></li>
+	<li><a href="#">Amesville</a></li>
+</ul>
+
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
+	Log:
+	<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
+</div>
+
+<button id="2">Show context menu 2</button>
+
+</body>
+</html>
diff --git a/tests/visual/menu/default.html b/tests/visual/menu/default.html
new file mode 100644
index 000000000..1e630ddeb
--- /dev/null
+++ b/tests/visual/menu/default.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html>
+<head>
+	<title>Menu Visual Test: Default</title>
+	<link rel="stylesheet" href="../visual.css" type="text/css" />
+	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
+	<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
+	<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+	<script type="text/javascript">
+	$(function() {
+		$.fn.themeswitcher && $('<div/>').css({
+			position: "absolute",
+			right: 10,
+			top: 10
+		}).appendTo(document.body).themeswitcher();
+		
+		var menus = $("#menu1, #menu2").menu({
+			selected: function(event, ui) {
+				$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
+			}
+		}).keydown(function(event) {
+			var menu = $(this).data("menu");
+			if (menu.widget().is(":hidden"))
+				return;
+			event.stopPropagation();
+			switch (event.keyCode) {
+			case $.ui.keyCode.PAGE_UP:
+				menu.previousPage();
+				event.preventDefault();
+				break;
+			case $.ui.keyCode.PAGE_DOWN:
+				menu.nextPage();
+				event.preventDefault();
+				break;
+			case $.ui.keyCode.UP:
+				menu.previous();
+				event.preventDefault();
+				break;
+			case $.ui.keyCode.DOWN:
+				menu.next();
+				event.preventDefault();
+				break;
+			case $.ui.keyCode.ENTER:
+				menu.select();
+				event.preventDefault();
+				break;
+			}
+		});
+
+	});
+	</script>
+	<style>
+		body { font-size:62.5%; }
+		.ui-menu { width: 200px; }
+		#menu2 { height: 200px; overflow: auto; }
+	</style>
+</head>
+<body>
+	
+<ul id="menu1" tabindex="0">
+	<li><a href="#">Aberdeen</a></li>
+	<li><a href="#">Ada</a></li>
+	<li><a href="#">Adamsville</a></li>
+	<li><a href="#">Addyston</a></li>
+	<li><a href="#">Adelphi</a></li>
+</ul>
+
+<ul id="menu2" tabindex="0">
+	<li><a href="#">Aberdeen</a></li>
+	<li><a href="#">Ada</a></li>
+	<li><a href="#">Adamsville</a></li>
+	<li><a href="#">Addyston</a></li>
+	<li><a href="#">Adelphi</a></li>
+	<li><a href="#">Adena</a></li>
+	<li><a href="#">Adrian</a></li>
+	<li><a href="#">Akron</a></li>
+	<li><a href="#">Albany</a></li>
+	<li><a href="#">Alexandria</a></li>
+	<li><a href="#">Alger</a></li>
+	<li><a href="#">Alledonia</a></li>
+	<li><a href="#">Alliance</a></li>
+	<li><a href="#">Alpha</a></li>
+	<li><a href="#">Alvada</a></li>
+	<li><a href="#">Alvordton</a></li>
+	<li><a href="#">Amanda</a></li>
+	<li><a href="#">Amelia</a></li>
+	<li><a href="#">Amesville</a></li>
+	<li><a href="#">Aberdeen</a></li>
+	<li><a href="#">Ada</a></li>
+	<li><a href="#">Adamsville</a></li>
+	<li><a href="#">Addyston</a></li>
+	<li><a href="#">Adelphi</a></li>
+	<li><a href="#">Adena</a></li>
+	<li><a href="#">Adrian</a></li>
+	<li><a href="#">Akron</a></li>
+	<li><a href="#">Albany</a></li>
+	<li><a href="#">Alexandria</a></li>
+	<li><a href="#">Alger</a></li>
+	<li><a href="#">Alledonia</a></li>
+	<li><a href="#">Alliance</a></li>
+	<li><a href="#">Alpha</a></li>
+	<li><a href="#">Alvada</a></li>
+	<li><a href="#">Alvordton</a></li>
+	<li><a href="#">Amanda</a></li>
+	<li><a href="#">Amelia</a></li>
+	<li><a href="#">Amesville</a></li>
+</ul>
+
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
+	Log:
+	<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
+</div>
+
+</body>
+</html>
diff --git a/tests/visual/menu/drilldown.html b/tests/visual/menu/drilldown.html
new file mode 100644
index 000000000..a4ada01da
--- /dev/null
+++ b/tests/visual/menu/drilldown.html
@@ -0,0 +1,230 @@
+<!doctype html>
+<html>
+<head>
+	<title>Menu Visual Test: Default</title>
+	<link rel="stylesheet" href="../visual.css" type="text/css" />
+	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
+	<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
+	<script type="text/javascript">
+	$(function() {
+		$.widget("ui.drilldown", {
+			_init: function() {
+				var self = this;
+				this.active = this.element;
+				
+				// hide submenus and create indicator icons
+				this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>').end().filter(":first").show();	
+				
+				this.element.find("ul").menu({
+					selected: function(event, ui) {
+						var nested = $(">ul", ui.item);
+						if (!nested.length) {
+							self.element.find("h3").text(ui.item.text());
+							self.options.selected.apply(this, arguments);
+							return;
+						}
+						self.active = ui.item.parent();
+						// put a previous submenu back into its place and hide it
+						self.hideDown();
+						if (nested.length) {
+							// append to body in order to display the submenu above the parent menu, instead of inside of it
+							nested.appendTo(document.body).menu("deactivate").show().position({
+								my: "left top",
+								at: "left top",
+								of: self.element.children("ul:first")
+							// store the current submenu
+							}).data("menuparent", ui.item);
+							
+							self.active.data("submenu", nested);
+						}
+					}
+				});
+			},
+			
+			up: function() {
+				if (!this.active.data("menuparent"))
+					return;
+				this.hideDown();
+				this.active.menu("deactivate");
+				this.active = this.active.data("menuparent").parent();
+			},
+			
+			down: function() {
+				var submenu = this.active.data("submenu");
+				if (!submenu)
+					return;
+				submenu.data("menu").activate(submenu.children(":first"))
+				this.active = submenu;
+			},
+			
+			show: function() {
+				this.element.menu("deactivate").show();
+				this.active = this.element;
+			},
+			
+			hide: function() {
+				this.hideDown();
+				var child = this.active.hide(), parent;
+				while(child.data("menuparent")) {
+					parent = child.data("menuparent");
+					child.appendTo(parent).removeData("menuparent");
+					child = parent.parent().removeData("submenu").hide();
+				}
+			},
+			
+			hideDown: function() {
+				var submenu = this.active.data("submenu");
+				while(submenu) {
+					var parent = submenu.data("menuparent");
+					submenu.appendTo(parent).hide().removeData("menuparent");
+					parent.parent().removeData("submenu");
+					submenu = submenu.data("submenu");
+				};
+			}
+		});
+		
+		var nestedmenu = $("#drilldown").drilldown({
+			selected: function(event, ui) {
+				$("#log").append("<div>Selected " + ui.item.text() + "</div>");
+			}
+		});
+		
+		$().keydown(function(event) {
+			var menu = nestedmenu.data("drilldown").active.data("menu");
+			if (menu.widget().is(":hidden"))
+				return;
+			event.stopPropagation();
+			switch (event.keyCode) {
+			case $.ui.keyCode.PAGE_UP:
+				menu.previousPage();
+				break;
+			case $.ui.keyCode.PAGE_DOWN:
+				menu.nextPage();
+				break;
+			case $.ui.keyCode.UP:
+				menu.previous();
+				break;
+			case $.ui.keyCode.LEFT:
+				nestedmenu.nestedmenu("up");
+				break;
+			case $.ui.keyCode.RIGHT:
+				nestedmenu.nestedmenu("down");
+				break;
+			case $.ui.keyCode.DOWN:
+				menu.next();
+				event.preventDefault();
+				break;
+			case $.ui.keyCode.ENTER:
+			case $.ui.keyCode.TAB:
+				menu.select();
+				nestedmenu.nestedmenu("hide");
+				event.preventDefault();
+				break;
+			case $.ui.keyCode.ESCAPE:
+				nestedmenu.nestedmenu("hide");
+				break;
+			default:
+				clearTimeout(menu.filterTimer);
+				var prev = menu.previousFilter || "";
+				var character = String.fromCharCode(event.keyCode);
+				var skip = false;
+				if (character == prev) {
+					skip = true;
+				} else {
+					character = prev + character;
+				}
+				
+				var match = menu.widget().children("li").filter(function() {
+					return new RegExp("^" + character, "i").test($("a", this).text());
+				});
+				var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;
+				if (!match.length) {
+					character = String.fromCharCode(event.keyCode);
+					match = menu.widget().children("li").filter(function() {
+						return new RegExp("^" + character, "i").test($(this).text());
+					});
+				}
+				if (match.length) {
+					menu.activate(match);
+					if (match.length > 1) {
+						menu.previousFilter = character;
+						menu.filterTimer = setTimeout(function() {
+							delete menu.previousFilter;
+						}, 1000);
+					} else {
+						delete menu.previousFilter;
+					}
+				} else {
+					delete menu.previousFilter;
+				}
+			}
+		});
+	});
+	</script>
+	<style>
+		body { font-size:62.5%; }
+		.ui-menu { width: 200px; height: 170px; }
+		.ui-menu .ui-icon { float: right; }
+	</style>
+</head>
+<body>
+	
+<div id="drilldown">
+	<h3>Make a selection...</h3>
+	<ul>
+		<li>
+			<a href="#">Amsterdam</a>
+			<ul>
+				<li><a href="#">Aberdeen</a></li>
+				<li><a href="#">Ada</a></li>
+				<li>
+					<a href="#">Adamsville</a>
+					<ul>
+						<li><a href="#">Anaheim</a></li>
+						<li>
+							<a href="#">Cologne</a>
+							<ul>
+								<li><a href="#">Mberdeen</a></li>
+								<li><a href="#">Mda</a></li>
+								<li><a href="#">Mdamsville</a></li>
+								<li><a href="#">Mddyston</a></li>
+								<li><a href="#">Mmesville</a></li>
+							</ul>
+						</li>
+						<li><a href="#">Frankfurt</a></li>
+					</ul>
+				</li>
+				<li><a href="#">Addyston</a></li>
+				<li><a href="#">Amesville</a></li>
+			</ul>
+		</li>
+		<li><a href="#">Anaheim</a></li>
+		<li><a href="#">Cologne</a></li>
+		<li><a href="#">Frankfurt</a></li>
+		<li>
+			<a href="#">Magdeburg</a>
+			<ul>
+				<li><a href="#">Mberdeen</a></li>
+				<li><a href="#">Mda</a></li>
+				<li><a href="#">Mdamsville</a></li>
+				<li><a href="#">Mddyston</a></li>
+				<li><a href="#">Mmesville</a></li>
+			</ul>
+		</li>
+		<li><a href="#">Munich</a></li>
+		<li><a href="#">Utrecht</a></li>
+		<li><a href="#">Zurich</a></li>
+	</ul>
+</div>
+
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
+	Log:
+	<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
+</div>
+
+</body>
+</html>
diff --git a/tests/visual/menu/nested.html b/tests/visual/menu/nested.html
new file mode 100644
index 000000000..5ee776b06
--- /dev/null
+++ b/tests/visual/menu/nested.html
@@ -0,0 +1,250 @@
+<!doctype html>
+<html>
+<head>
+	<title>Menu Visual Test: Default</title>
+	<link rel="stylesheet" href="../visual.css" type="text/css" />
+	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
+	<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
+	<script type="text/javascript">
+	$(function() {
+		$.widget("ui.nestedmenu", {
+			_init: function() {
+				var self = this;
+				this.active = this.element;
+				
+				// hide submenus and create indicator icons
+				this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>');	
+				
+				this.element.find("ul").andSelf().menu({
+					selected: this.options.selected,
+					focus: function(event, ui) {
+						self.active = ui.item.parent();
+						self.activeItem = ui.item;
+						// put a previous submenu back into its place and hide it
+						self.hideDown();
+						var nested = $(">ul", ui.item);
+						// only for mouse-events (should actually check event.originalEvent.type, but for keys, originalEvent is undefined...)
+						if (nested.length && /^mouse/.test(event.originalEvent.type)) {
+							self._openSubmenu(nested, ui.item);
+						}
+					}
+				})
+			},
+			
+			_openSubmenu: function(nested, item) {
+				// append to body in order to display the submenu above the parent menu, instead of inside of it
+				nested.appendTo(document.body).menu("deactivate").show().position({
+					my: "left top",
+					at: "right top",
+					of: item
+				// store the current submenu
+				}).data("menuparent", item);
+				
+				this.active.data("submenu", nested);
+			},
+			
+			up: function(event) {
+				if (!this.active.data("menuparent"))
+					return;
+				this.active.menu("deactivate");
+				this.active = this.active.data("menuparent").parent();
+				this.activeItem = this.active.data("menu").active;
+				this.hideDown();
+			},
+			
+			down: function(event) {
+				var submenu = this.active.data("submenu");
+				if (!submenu && this.activeItem) {
+					// try to open submenu or return(?); only mouseover opens submenu directly, key doesn't
+					var item = this.activeItem,
+						nested = item.children("ul");
+					if (!nested.length)
+						return;
+					this._openSubmenu(nested, item);
+					submenu = this.active.data("submenu");
+				}
+				submenu.data("menu").activate(event, submenu.children(":first"))
+				this.active = submenu;
+			},
+			
+			show: function() {
+				this.element.menu("deactivate").show();
+				this.active = this.element;
+			},
+			
+			hide: function() {
+				this.hideDown();
+				var child = this.active.hide(), parent;
+				while(child.data("menuparent")) {
+					parent = child.data("menuparent");
+					child.appendTo(parent).removeData("menuparent");
+					child = parent.parent().removeData("submenu").hide();
+				}
+			},
+			
+			hideDown: function() {
+				var submenu = this.active.data("submenu");
+				while(submenu) {
+					var parent = submenu.data("menuparent");
+					submenu.appendTo(parent).hide().removeData("menuparent");
+					parent.parent().removeData("submenu");
+					submenu = submenu.data("submenu");
+				};
+			}
+		});
+		
+		var nestedmenu = $("#menu").nestedmenu({
+			selected: function(event, ui) {
+				$("#log").append("<div>Selected " + ui.item.text() + "</div>");
+			}
+		}).hide();
+		
+		$("button").click(function(event) {
+			// TODO required to prevent the click handler below from handling this event
+			event.stopPropagation();
+			nestedmenu.nestedmenu("show").position({
+				my: "left top",
+				at: "right top",
+				of: event.pageX > 0 ? event : this
+			});
+			$(document).one("click", function() {
+				nestedmenu.nestedmenu("hide");
+			})
+		}).keydown(function(event) {
+			var menu = nestedmenu.data("nestedmenu").active.data("menu");
+			if (menu.widget().is(":hidden"))
+				return;
+			event.stopPropagation();
+			switch (event.keyCode) {
+			case $.ui.keyCode.PAGE_UP:
+				menu.previousPage(event);
+				break;
+			case $.ui.keyCode.PAGE_DOWN:
+				menu.nextPage(event);
+				break;
+			case $.ui.keyCode.UP:
+				menu.previous(event);
+				break;
+			case $.ui.keyCode.LEFT:
+				nestedmenu.nestedmenu("up", event);
+				break;
+			case $.ui.keyCode.RIGHT:
+				nestedmenu.nestedmenu("down", event);
+				break;
+			case $.ui.keyCode.DOWN:
+				menu.next(event);
+				event.preventDefault();
+				break;
+			case $.ui.keyCode.ENTER:
+			case $.ui.keyCode.TAB:
+				menu.select();
+				nestedmenu.nestedmenu("hide");
+				event.preventDefault();
+				break;
+			case $.ui.keyCode.ESCAPE:
+				nestedmenu.nestedmenu("hide");
+				break;
+			default:
+				clearTimeout(menu.filterTimer);
+				var prev = menu.previousFilter || "";
+				var character = String.fromCharCode(event.keyCode);
+				var skip = false;
+				if (character == prev) {
+					skip = true;
+				} else {
+					character = prev + character;
+				}
+				
+				var match = menu.widget().children("li").filter(function() {
+					return new RegExp("^" + character, "i").test($("a", this).text());
+				});
+				var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;
+				if (!match.length) {
+					character = String.fromCharCode(event.keyCode);
+					match = menu.widget().children("li").filter(function() {
+						return new RegExp("^" + character, "i").test($(this).text());
+					});
+				}
+				if (match.length) {
+					menu.activate(event, match);
+					if (match.length > 1) {
+						menu.previousFilter = character;
+						menu.filterTimer = setTimeout(function() {
+							delete menu.previousFilter;
+						}, 1000);
+					} else {
+						delete menu.previousFilter;
+					}
+				} else {
+					delete menu.previousFilter;
+				}
+			}
+		});
+	});
+	</script>
+	<style>
+		body { font-size:62.5%; }
+		.ui-menu { width: 200px; position: absolute; }
+		.ui-menu .ui-icon { float: right; }
+	</style>
+</head>
+<body>
+	
+<button>Show context menu</button>
+
+<ul id="menu">
+	<li>
+		<a href="#">Amsterdam</a>
+		<ul>
+			<li><a href="#">Aberdeen</a></li>
+			<li><a href="#">Ada</a></li>
+			<li>
+				<a href="#">Adamsville</a>
+				<ul>
+					<li><a href="#">Anaheim</a></li>
+					<li>
+						<a href="#">Cologne</a>
+						<ul>
+							<li><a href="#">Mberdeen</a></li>
+							<li><a href="#">Mda</a></li>
+							<li><a href="#">Mdamsville</a></li>
+							<li><a href="#">Mddyston</a></li>
+							<li><a href="#">Mmesville</a></li>
+						</ul>
+					</li>
+					<li><a href="#">Frankfurt</a></li>
+				</ul>
+			</li>
+			<li><a href="#">Addyston</a></li>
+			<li><a href="#">Amesville</a></li>
+		</ul>
+	</li>
+	<li><a href="#">Anaheim</a></li>
+	<li><a href="#">Cologne</a></li>
+	<li><a href="#">Frankfurt</a></li>
+	<li>
+		<a href="#">Magdeburg</a>
+		<ul>
+			<li><a href="#">Mberdeen</a></li>
+			<li><a href="#">Mda</a></li>
+			<li><a href="#">Mdamsville</a></li>
+			<li><a href="#">Mddyston</a></li>
+			<li><a href="#">Mmesville</a></li>
+		</ul>
+	</li>
+	<li><a href="#">Munich</a></li>
+	<li><a href="#">Utrecht</a></li>
+	<li><a href="#">Zurich</a></li>
+</ul>
+
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
+	Log:
+	<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
+</div>
+
+</body>
+</html>
