Accessible HTML5/CSS3 dropdown menu without Javascript - html

Question

I have created a dropdown menu using pure css, which works fine with a mouse, but I would like to make it more accessible via the keyboard. I don't want to use Javascript to do this.
Here is a snippet of the html code, and a jsfiddle:
<nav>
<ul>
<li>Home</li>
<li>About us »
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</li>
</ul>
</nav>
And here is the CSS:
BODY {
font-family : Arial, Helvetica, Swiss, Geneva, Sans-serif;
font-size: 0.8em;
width: 795px;
margin: 0px auto;
padding: 0px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul, nav ul li:focus > ul, nav ul li:active > ul {
display: block;
}
nav ul {
background: #696969;
padding: 0px 0px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
border-bottom: 1px solid #FFF;
}
nav ul li:hover, nav ul li:focus, nav ul li:active {
background: #F8A509;
}
nav ul li:hover a, nav ul li:focus a, nav ul li:active a {
color: #fff;
}
nav ul li a {
display: block;
padding: 4px 14px;
color: #fff;
text-decoration: none;
}
nav ul ul {
background: #BDD575;
padding: 0px;
position: absolute;
top: 100%;
-moz-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.20);
-webkit-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.20);
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.20);
}
nav ul ul li {
float: none;
border-bottom: 1px solid #FFF;
position: relative;
}
nav ul ul li a {
padding: 4px 14px;
color: #fff;
white-space: nowrap;
border-right: 1px solid #FFF;
}
nav ul ul li a:hover, nav ul ul li a:focus, nav ul ul li a:active {
background: #9ED112;
color: #fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Any ideas where I am going wrong?
TIA for any helpful advice.

Answer 1

The W3C's draft specification for Accessible Rich Internet Applications (WAI-ARIA) makes it possible to supplement HTML with attributes that explicitly communicate the roles, states, and properties of the various parts that make up a menu system. As assistive technology (AT) users interact with the menu, ARIA passes updated information to their AT, and their AT then communicates that information in meaningful ways.
See more about on Accessible Dropdown Menus
Working Demo
Markup
<nav role="navigation" aria-label="Main menu">
<ul id="nav" role="menubar" aria-hidden="false">
<li role="menuitem" aria-haspopup="false">Home</li>
<li tabindex="0" aria-haspopup="true">About us »
<ul data-test="true" role="menu" aria-hidden="true">
<li role="menuitem">Option 1</li>
<li role="menuitem">Option 2</li>
<li role="menuitem">Option 3</li>
<li role="menuitem">Option 4</li>
<li role="menuitem">Option 5</li>
</ul>
</li>
</ul>
</nav>