<h1>An accessible navigation</h1>

<nav role="navigation" class="nav-main">
  <a class="menu"
     aria-controls="nav-main-menu"
     aria-owns="nav-main-menu"
     aria-haspop="true"
     href="#">
    <b class="ico-menu" aria-hidden="true"></b>
    Menu
  </a>
  <ul class="nav-menu"
      id="nav-main-menu"
      aria-expanded="false">              
    <li><a class="nav-item" href="#">About</a></li>
    <li><a class="nav-item" href="#">Events</a></li>
    <li><a class="nav-item" href="#">Resources</a></li>
  </ul>
</nav>

*
  box-sizing: border-box
body
  font-family: sans-serif
  font-size: 120%
  padding: .5em 1em

h1
  font-size: 1.2em

.nav-main
  a
    color: #593e47
    text-decoration: none

.nav-menu,
.menu
  background: #ccc
.nav-item,
.menu
  padding: .5em
  
.menu
  border-radius: 5px 5px 0 0
  display: block
  line-height: 1
  text-transform: uppercase
  width: 100px
  
.ico-menu:before
  // VoiceOver reads CSS content
  content: "\2630"
.nav-menu
  display: none
  margin: 0
  padding: 0
  width: 200px
  li
    list-style: none
.nav-item
  display: block
  &:hover
    background: #ad929a
  

$(function() {
  $('.menu').on('mouseenter focusin click', function(e) {
    toggleMenu(e);
  });
  $('.nav-menu').on('mouseleave', function(e) {
    toggleMenu(e);
  });
  $('.nav-item:last-child a').on('focusout', function(e) {
    toggleMenu(e);
  });
  
  function toggleMenu(e) {
    var $navMenu = $('#nav-main-menu');
    if ($navMenu.is(':visible')) {
      $navMenu.hide();
      $menu.attr('aria-expanded', 'false');
    } else {
      $navMenu.show();
      $menu.attr('aria-expanded', 'true');
    }
  }
});