For a menu to be accessible it needs to work for:

  • Mouse users
  • Touch screen users
  • Keyboard-only users
  • Screen reader users

Bootstrap example:

Other options:

Other accessible options exist, like a split toggle. It uses a similar technique but allows for the top-level link (Messages) to be clickable and go to a webpage.  The down arrow would become a toggle button.

menu item with a split toggle

The code for this would look something like the following:

  <a href="/go-somewhere">Messages</a>
  <button class="arrow" aria-haspopup="true" aria-expanded="true"><span class="element-invisible">toggle sub nav</span></button>

NOTE: The aria-expanded attribute toggles. When the menu is visible it should be "true" when hidden it should be "false".

The .element-invisible class would visually hide the "toggle sub nav" text but is still availible to screen reader users. Some frameworks use the .sr-only class to do the same thing.

.element-invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;

Do not use display:none to hide the "toggle sub nav" text! For screen reader software it is the same as deleting it from the DOM.