Aria dropdown menu example

HTML

<nav role="navigation" aria-label="example with dropdowns">
	<ul class="with-dropdowns">
        <li>
            <a href="#">Home</a>
            <ul aria-hidden="true" aria-label="submenu">
				<li><a href="/#/#who-we-are">Who me am</a></li>
				<li><a href="/#/#what-we-do">What me do</a></li>
				<li><a href="/#/#why">Whyme</a></li>
			</ul>
        </li>
		<li>
			<a href="/about" aria-haspopup="true">About</a>
			<ul aria-hidden="true" aria-label="submenu">
				<li><a href="/about/#who-we-are">Who we are</a></li>
				<li><a href="/about/#what-we-do">What we do</a></li>
				<li><a href="/about/#why">Why</a></li>
			</ul>
		</li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

CSS

/* 9. Simple dropdowns */

[aria-label^="example"] ul {
	background: #1928cf;
}

[aria-label^="example"] ul:after {
	content: '\0020';
	display: block;
	clear: both;
}

[aria-label^="example"] li {
	float: left;
	vertical-align: top;
	list-style: none;
}

[aria-label^="example"] li + li a {
	border-left: 1px solid;
}

[aria-label^="example"] a {
	color: #fff;
	display: block;
	padding: 0.5em;
}

[aria-label^="example"] a:hover, [aria-label^="example"] a:focus {
	background: #222;
}

[aria-haspopup="true"] {
	position: relative;
}

[aria-haspopup="true"] span {
	font-size: 0.85em;
	padding-left: 0.25em;
}

ul[aria-hidden="true"] {
	display: none;
}

[aria-haspopup="true"] + ul[aria-hidden="false"] {
	margin-top: 0;
	display: block;
	position: absolute;
	min-width: 200px;
}

[aria-haspopup="true"] + ul li {
	float: none;
}

JavaScript

$('[role="navigation"] ul ul').prev('a')
  .attr('aria-haspopup', 'true')
  .append('<span aria-hidden="true"> &#x25be;</span>');

var showSubmenu = function(dropdown) {
  dropdown.attr('aria-hidden', 'false');
};

var hideSubmenu = function(dropdown) {
  dropdown.attr('aria-hidden', 'true');
};

$('.with-dropdowns > li > a').on('focus', function(e) {
  hideSubmenu($('[aria-label="submenu"]'));
});

$('[aria-haspopup]').on('click', function(e) {
  var submenu = $(this).next();
  showSubmenu(submenu);
  $(submenu).find('li:first-child a').focus();
  return false;
});

$('[aria-haspopup]').hover(function() {
  showSubmenu($(this).next());
  $(this).off('click');
});

$('[aria-haspopup]').parents('li').mouseleave(function() {
  hideSubmenu($(this).find('[aria-label="submenu"]'));
});