1.1.3. Structure navigation menus with lists

Use unordered lists <ul> and <li> to tag the navigation menus.

If a menu has several levels, make sure the lists are nested properly: 

<ul id="menu-principal" role="navigation">
    <li><a href="page-1.html">First menu item</a></li>
    <li>
        <a href="page-2.html">Second menu item</a>
        <ul>
            <li><a href="page-3.html">First sub-menu item</a></li>
            <li><a href="page-4.html">Second sub-menu item</a></li>
        </ul>
    </li>
    <li><a href="page-5.html">Third menu item</a></li>
</ul>

HTML5

In HTML5, you should also wrap the main navigation menus in a <nav> tag, so that you have: 

<nav id="menu-principal" role="navigation">
    <ul>
       […]
    </ul>
</nav>