<nav class="c-nav c-nav--vertical js-nav" aria-label="Multi-level Nav">
<ul class="c-nav__list" role="menubar">
<li class="c-nav__list-element" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="One">One</a>
</li>
<li class="c-nav__list-element c-nav__list-element--has-children" aria-haspopup="true" aria-expanded="false" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="Two">Two</a>
<ul class="c-nav__list c-nav__list--child" role="menu">
<li class="c-nav__list-element c-nav__list-element--child" role="none">
<a href="#grid" role="menuitem" class="c-nav__link c-nav__link--child" title="Two One">Two One</a>
</li>
<li class="c-nav__list-element c-nav__list-element--child" role="none">
<a href="#grid" role="menuitem" class="c-nav__link c-nav__link--child" title="Two Two">Two Two</a>
</li>
<li class="c-nav__list-element c-nav__list-element--child" role="none">
<a href="#grid" role="menuitem" class="c-nav__link c-nav__link--child" title="Two Three">Two Three</a>
</li>
</ul>
</li>
<li class="c-nav__list-element c-nav__list-element--has-children" aria-haspopup="true" aria-expanded="false" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="Three">Three</a>
<ul class="c-nav__list c-nav__list--child" role="menu">
<li class="c-nav__list-element c-nav__list-element--child" role="none">
<a href="#grid" role="menuitem" class="c-nav__link c-nav__link--child" title="Three One">Three One</a>
</li>
<li class="c-nav__list-element c-nav__list-element--child" role="none">
<a href="#grid" role="menuitem" class="c-nav__link c-nav__link--child" title="Three Two">Three Two</a>
</li>
<li class="c-nav__list-element c-nav__list-element--child" role="none">
<a href="#grid" role="menuitem" class="c-nav__link c-nav__link--child" title="Three Three">Three Three</a>
</li>
</ul>
</li>
<li class="c-nav__list-element c-nav__list-element--has-children" aria-haspopup="true" aria-expanded="false" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="Four">Four</a>
<ul class="c-nav__list c-nav__list--child" role="menu">
<li class="c-nav__list-element c-nav__list-element--child" role="none">
<a href="#grid" role="menuitem" class="c-nav__link c-nav__link--child" title="Four One">Four One</a>
</li>
<li class="c-nav__list-element c-nav__list-element--child" role="none">
<a href="#grid" role="menuitem" class="c-nav__link c-nav__link--child" title="Four Two">Four Two</a>
</li>
<li class="c-nav__list-element c-nav__list-element--child" role="none">
<a href="#grid" role="menuitem" class="c-nav__link c-nav__link--child" title="Four Three">Four Three</a>
</li>
</ul>
</li>
</ul>
</nav>
<nav class="c-nav c-nav--vertical js-nav" aria-label="Multi-level Nav">
<ul class="c-nav__list" role="menubar">
<li class="c-nav__list-element" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="One">One</a>
</li>
<li class="c-nav__list-element c-nav__list-element--has-children" aria-haspopup="true" aria-expanded="false" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="Two">Two</a>
<ul class="c-nav__list c-nav__list--child" role="menu">
<li class="c-nav__list-element c-nav__list-element--child" role="none">
<a href="#grid" role="menuitem" class="c-nav__link c-nav__link--child" title="Two One">Two One</a>
</li>
<li class="c-nav__list-element c-nav__list-element--child" role="none">
<a href="#grid" role="menuitem" class="c-nav__link c-nav__link--child" title="Two Two">Two Two</a>
</li>
<li class="c-nav__list-element c-nav__list-element--child" role="none">
<a href="#grid" role="menuitem" class="c-nav__link c-nav__link--child" title="Two Three">Two Three</a>
</li>
</ul>
</li>
<li class="c-nav__list-element c-nav__list-element--has-children" aria-haspopup="true" aria-expanded="false" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="Three">Three</a>
<ul class="c-nav__list c-nav__list--child" role="menu">
<li class="c-nav__list-element c-nav__list-element--child" role="none">
<a href="#grid" role="menuitem" class="c-nav__link c-nav__link--child" title="Three One">Three One</a>
</li>
<li class="c-nav__list-element c-nav__list-element--child" role="none">
<a href="#grid" role="menuitem" class="c-nav__link c-nav__link--child" title="Three Two">Three Two</a>
</li>
<li class="c-nav__list-element c-nav__list-element--child" role="none">
<a href="#grid" role="menuitem" class="c-nav__link c-nav__link--child" title="Three Three">Three Three</a>
</li>
</ul>
</li>
<li class="c-nav__list-element c-nav__list-element--has-children" aria-haspopup="true" aria-expanded="false" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="Four">Four</a>
<ul class="c-nav__list c-nav__list--child" role="menu">
<li class="c-nav__list-element c-nav__list-element--child" role="none">
<a href="#grid" role="menuitem" class="c-nav__link c-nav__link--child" title="Four One">Four One</a>
</li>
<li class="c-nav__list-element c-nav__list-element--child" role="none">
<a href="#grid" role="menuitem" class="c-nav__link c-nav__link--child" title="Four Two">Four Two</a>
</li>
<li class="c-nav__list-element c-nav__list-element--child" role="none">
<a href="#grid" role="menuitem" class="c-nav__link c-nav__link--child" title="Four Three">Four Three</a>
</li>
</ul>
</li>
</ul>
</nav>
{
"name": "Child Menus"
}
This is created using best practices with accessibility in mind (https://www.w3.org/WAI/tutorials/menus/), using aria states, roles, keyboard support and delays for hovering on mobile.
To get this to work, you will need to use the class .js-nav on the main .c-nav nav element.