Accessible and responsive dropdown for navigation

Based on: http://simplyaccessible.com/examples/css-menu/option-2/ and Bootstrap

Live demo

Features

• HTML5 nav element with ARIA navigation landmark <nav role="navigation">
• Keyboard accessible
• The navigation is marked up as nested unordered lists and visible to screenreaders at all time, including the submenu-items. They are visually hidden off screen with CSS (left: -9999px;).
• All links show up in a screenreaders link list.

Screenreader tests

• Jaws 13, 15 and 16 with IE9 in Windows 7
• Jaws 13, 15, 16 with Firefox 35 in Windows 7
• NVDA 2015.1 with IE9 in Windows 7
• NVDA 2015.1 with Firefox 35 in Windows 7
• VoiceOver 7 with Safari 8 in Mac OS X 10.10.3
• VoiceOver with Safari 8 in iOS 8.3