Example for an Application Menu

<div role="menubar">
	<ul role="menu" aria-label="functions" id="appmenu">
			<li role="menuitem" aria-haspopup="true">
				File
				<ul role="menu">
							<li role="menuitem">New</li>
							<li role="menuitem">Open</li>
							<li role="menuitem">Print</li>
					</ul>
			</li>
			<li role="menuitem" aria-haspopup="true">
				Edit
				<ul role="menu">
							<li role="menuitem">Undo</li>
							<li role="menuitem">Redo</li>
							<li role="menuitem">Cut</li>
							<li role="menuitem">Copy</li>
							<li role="menuitem">Paste</li>
					</ul>
			</li>
			<li role="menuitem" aria-haspopup="true">
					Format
					<ul role="menu">
							<li role="menuitem">Font</li>
							<li role="menuitem">Text</li>
					</ul>
			</li>
			<li role="menuitem" aria-haspopup="true">
				View
				<ul role="menu">
					<li role="menuitem">100%</li>
					<li role="menuitem">Zoom In</li>
					<li role="menuitem">Zoom Out</li>
				</ul>
			</li>
			<li role="menuitem">Help</li>
	</ul>
</div>

#appmenu {
	width:80%;
	float: left;
	margin: 0;
	padding: 0;
	color: #fff;
	background-color: #369;
	padding: .25em;
}

#appmenu li {
	white-space: nowrap;
	display:block;
	padding: .25em .75em;
	border: 1px solid #fff;
}

#appmenu > li {
	float: left;
	background-color: #036;
	text-align: center;
	position:relative;
	cursor: pointer;
}

#appmenu :hover,
#appmenu :focus {
	background-color: #fff;
	color: #036;
	border: 1px solid #036;
	text-decoration: underline;
}

#appmenu :hover li,
#appmenu :focus li {
	color: #fff;
	background-color: #036;
}

#appmenu > li > ul {
	display: none;
	position:absolute;
	left:0;
	right:0;
	top:100%;
	padding:0;
	margin:0;
	background-color: #036;
	width: 200%;
	text-align: left;
}

#appmenu > li[aria-expanded="true"] > ul {
	display:block;
}

var appsMenuItems = document.querySelectorAll('#appmenu > li');
var subMenuItems = document.querySelectorAll('#appmenu > li li');
var keys = {
	tab:    9,
	enter:  13,
	esc:    27,
	space:  32,
	left:   37,
	up:     38,
	right:  39,
	down:   40
};
var currentIndex, subIndex;

var gotoIndex = function(idx) {
	if (idx == appsMenuItems.length) {
		idx = 0;
	} else if (idx < 0) {
		idx = appsMenuItems.length - 1;
	}
	appsMenuItems[idx].focus();
	currentIndex = idx;
};

var gotoSubIndex = function (menu, idx) {
	var items = menu.querySelectorAll('li');
	if (idx == items.length) {
		idx = 0;
	} else if (idx < 0) {
		idx = items.length - 1;
	}
	items[idx].focus();
	subIndex = idx;
}

Array.prototype.forEach.call(appsMenuItems, function(el, i){
		if (0 == i) {
			el.setAttribute('tabindex', '0');
			el.addEventListener("focus", function() {
				currentIndex = 0;
			});
		} else {
			el.setAttribute('tabindex', '-1');
		}
		el.addEventListener("focus", function() {
			subIndex = 0;
			Array.prototype.forEach.call(appsMenuItems, function(el, i){
				el.setAttribute('aria-expanded', "false");
			});
		});
		el.addEventListener("click",  function(event){
			if (this.getAttribute('aria-expanded') == 'false' || this.getAttribute('aria-expanded') ==  null) {
				this.setAttribute('aria-expanded', "true");
			} else {
				this.setAttribute('aria-expanded', "false");
			}
			event.preventDefault();
			return false;
		});
		el.addEventListener("keydown", function(event) {
			switch (event.keyCode) {
				case keys.right:
					gotoIndex(currentIndex + 1);
					break;
				case keys.left:
					gotoIndex(currentIndex - 1);
					break;
				case keys.tab:
					if (event.shiftKey) {
						gotoIndex(currentIndex - 1);
					} else {
						gotoIndex(currentIndex + 1);
					}
					break;
				case keys.enter:
				case keys.down:
					this.click();
					subindex = 0;
					gotoSubIndex(this.querySelector('ul'), 0);
					break;
				case keys.up:
					this.click();
					var submenu = this.querySelector('ul');
					subindex = submenu.querySelectorAll('li').length - 1;
					gotoSubIndex(submenu, subindex);
					break;
				case keys.esc:
					document.querySelector('a[href="#related"]').focus();
			}
			event.preventDefault();
		});
});

Array.prototype.forEach.call(subMenuItems, function(el, i){
	el.setAttribute('tabindex', '-1');
	el.addEventListener("keydown", function(event) {
			switch (event.keyCode) {
				case keys.tab:
					if (event.shiftKey) {
						gotoIndex(currentIndex - 1);
					} else {
						gotoIndex(currentIndex + 1);
					}
					break;
				case keys.right:
					gotoIndex(currentIndex + 1);
					break;
				case keys.left:
					gotoIndex(currentIndex - 1);
					break;
				case keys.esc:
					gotoIndex(currentIndex);
					break;
				case keys.down:
					gotoSubIndex(this.parentNode, subIndex + 1);
					break;
				case keys.up:
					gotoSubIndex(this.parentNode, subIndex - 1);
					break;
				case keys.enter:
				case keys.space:
					alert(this.innerText);
					break;
			}
			event.preventDefault();
			event.stopPropagation();
			return false;
		});
	el.addEventListener("click", function(event) {
			alert(this.innerHTML);
			event.preventDefault();
			event.stopPropagation();
			return false;
		});
});