Patterns to use aria roles, both HTML and a sketch for the CSS

menus.html

<!-- navigational menubar (with drop down submenu, without works as well) -->
<nav aria-label="main" role="navigation"><!-- role explicit for older browsers, using aria-label to differentiate from other navs -->
    <ul role="menubar" aria-activedescendant="home-menuitem">
        <li role="presentation">
            <a href="#" role="menuitem" aria-selected="true" id="home-menuitem">Home</a></li>
        <li role="presentation">
            <a href="#" role="menuitem" aria-selected="false" id="link-menuitem">Link</a>
        </li>
        <li role="presentation">
            <!-- using button to be triggered on-click -->
            <button role="menuitem" aria-haspopup="true" id="dropdown-menuitem">
                Dropdown
            </button>
            <ul role="menu" aria-labelledby="dropdown-menuitem" aria-expanded="false" hidden>
                <li role="presentation">
                    <a href="#" role="menuitem" aria-selected="false" id="submenu-home-menuitem">Home</a>
                </li>
                <li role="presentation">
                    <a href="#" role="menuitem" aria-selected="false" id="submenu-link-menuitem">Link</a>
                </li>
            </ul><!-- //menu -->
        </li>
    </ul><!-- //menubar -->
</nav><!-- //navigation -->

CSS (aim for _at most_ 4 levels of depth):

[role=menubar] {
    //styles for the menubar
}

[role=menubar] > li {
    //first-level lis
}

[role=menubar] [role=menu] {
    //To distinguish from menus not in menubars
}

[hidden] {
    //Styles to hide, replace classes to hide it visually and from screenreaders
    //Complement with classes that does normal hiding/image replacement maybe?
}

[aria-label=main] {
    //this is the main nav, at least suggested
}

<!-- navigational menu (with submenu, without works as well) -->
<nav role="navigation"><!-- role explicit for older browsers -->
    <ul role="menu" aria-activedescendant="home-menuitem">
        <li role="presentation">
            <a href="#" role="menuitem" aria-selected="true" id="home-menuitem">Home</a></li>
        <li role="presentation">
            <a href="#" role="menuitem" aria-selected="false" id="link-menuitem">Link</a>
        </li>
        <li role="presentation">
            <ul role="menu">
                <li role="presentation">
                    <a href="#" role="menuitem" aria-selected="false" id="submenu-home-menuitem">Home</a>
                </li>
                <li role="presentation">
                    <a href="#" role="menuitem" aria-selected="false" id="submenu-link-menuitem">Link</a>
                </li>
            </ul><!-- //menu -->
        </li>
    </ul><!-- //menu -->
</nav><!-- //navigation -->