Multi-level Drawer Navigation In Pure CSS

Preview:

Description:

A multi-level drawer (off-canvas) menu inspired by the modern app navigation system. Written in pure CSS/CSS3 and Checkbox Hack.

Click the hamburger button to toggle the drawer navigation. You can navigate through the hierarchical menu with a smooth sliding animation similar to a drill down menu.

How to use it:

Load the necessary stylesheet in the document’s head section.

<link href="style.css" rel="stylesheet" />

The HTML for the multi-level drawer navigation.

<header>
  <form action="javascript:">
    <input id="menu" type="checkbox">
    <input id="menu-reset" type="reset">
    <nav>
      <main>
        <label class="menu-toggle" for="menu"><span>&nbsp;</span></label>
        <label class="menu-close" for="menu-reset"><span>&nbsp;</span></label>
        <menu> <menuitem> <span class="heading">Menu</span> </menuitem> <menuitem>
          <label for="menu-item-1">Item 1</label>
          <input id="menu-item-1" type="checkbox">
          <nav>
            <main>
              <label class="menu-toggle" for="menu-item-1"><span>&nbsp;</span></label>
              <menu> <menuitem> <span class="heading">Item 1</span> </menuitem> <menuitem>
                <label for="menu-item-1-1">Item 1.1</label>
                <input id="menu-item-1-1" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-1-1"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 1.1</span> </menuitem> <menuitem> <span>Item 1.1.1</span> </menuitem> <menuitem> <span>Item 1.1.2</span> </menuitem> <menuitem> <span>Item 1.1.3</span> </menuitem> <menuitem> <span>Item 1.1.4</span> </menuitem> <menuitem> <span>Item 1.1.5</span> </menuitem> <menuitem> <span>Item 1.1.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-1-2">Item 1.2</label>
                <input id="menu-item-1-2" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-1-2"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 1.2</span> </menuitem> <menuitem> <span>Item 1.2.1</span> </menuitem> <menuitem> <span>Item 1.2.2</span> </menuitem> <menuitem> <span>Item 1.2.3</span> </menuitem> <menuitem> <span>Item 1.2.4</span> </menuitem> <menuitem> <span>Item 1.2.5</span> </menuitem> <menuitem> <span>Item 1.2.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-1-3">Item 1.3</label>
                <input id="menu-item-1-3" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-1-3"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 1.3</span> </menuitem> <menuitem> <span>Item 1.3.1</span> </menuitem> <menuitem> <span>Item 1.3.2</span> </menuitem> <menuitem> <span>Item 1.3.3</span> </menuitem> <menuitem> <span>Item 1.3.4</span> </menuitem> <menuitem> <span>Item 1.3.5</span> </menuitem> <menuitem> <span>Item 1.3.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-1-4">Item 1.4</label>
                <input id="menu-item-1-4" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-1-4"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 1.4</span> </menuitem> <menuitem> <span>Item 1.4.1</span> </menuitem> <menuitem> <span>Item 1.4.2</span> </menuitem> <menuitem> <span>Item 1.4.3</span> </menuitem> <menuitem> <span>Item 1.4.4</span> </menuitem> <menuitem> <span>Item 1.4.5</span> </menuitem> <menuitem> <span>Item 1.4.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-1-5">Item 1.5</label>
                <input id="menu-item-1-5" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-1-5"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 1.5</span> </menuitem> <menuitem> <span>Item 1.5.1</span> </menuitem> <menuitem> <span>Item 1.5.2</span> </menuitem> <menuitem> <span>Item 1.5.3</span> </menuitem> <menuitem> <span>Item 1.5.4</span> </menuitem> <menuitem> <span>Item 1.5.5</span> </menuitem> <menuitem> <span>Item 1.5.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-1-6">Item 1.6</label>
                <input id="menu-item-1-6" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-1-6"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 1.6</span> </menuitem> <menuitem> <span>Item 1.6.1</span> </menuitem> <menuitem> <span>Item 1.6.2</span> </menuitem> <menuitem> <span>Item 1.6.3</span> </menuitem> <menuitem> <span>Item 1.6.4</span> </menuitem> <menuitem> <span>Item 1.6.5</span> </menuitem> <menuitem> <span>Item 1.6.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> </menu>
            </main>
          </nav>
          </menuitem> <menuitem>
          <label for="menu-item-2">Item 2</label>
          <input id="menu-item-2" type="checkbox">
          <nav>
            <main>
              <label class="menu-toggle" for="menu-item-2"><span>&nbsp;</span></label>
              <menu> <menuitem> <span class="heading">Item 2</span> </menuitem> <menuitem>
                <label for="menu-item-2-1">Item 2.1</label>
                <input id="menu-item-2-1" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-2-1"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 2.1</span> </menuitem> <menuitem> <span>Item 2.1.1</span> </menuitem> <menuitem> <span>Item 2.1.2</span> </menuitem> <menuitem> <span>Item 2.1.3</span> </menuitem> <menuitem> <span>Item 2.1.4</span> </menuitem> <menuitem> <span>Item 2.1.5</span> </menuitem> <menuitem> <span>Item 2.1.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-2-2">Item 2.2</label>
                <input id="menu-item-2-2" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-2-2"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 2.2</span> </menuitem> <menuitem> <span>Item 2.2.1</span> </menuitem> <menuitem> <span>Item 2.2.2</span> </menuitem> <menuitem> <span>Item 2.2.3</span> </menuitem> <menuitem> <span>Item 2.2.4</span> </menuitem> <menuitem> <span>Item 2.2.5</span> </menuitem> <menuitem> <span>Item 2.2.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-2-3">Item 2.3</label>
                <input id="menu-item-2-3" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-2-3"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 2.3</span> </menuitem> <menuitem> <span>Item 2.3.1</span> </menuitem> <menuitem> <span>Item 2.3.2</span> </menuitem> <menuitem> <span>Item 2.3.3</span> </menuitem> <menuitem> <span>Item 2.3.4</span> </menuitem> <menuitem> <span>Item 2.3.5</span> </menuitem> <menuitem> <span>Item 2.3.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-2-4">Item 2.4</label>
                <input id="menu-item-2-4" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-2-4"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 2.4</span> </menuitem> <menuitem> <span>Item 2.4.1</span> </menuitem> <menuitem> <span>Item 2.4.2</span> </menuitem> <menuitem> <span>Item 2.4.3</span> </menuitem> <menuitem> <span>Item 2.4.4</span> </menuitem> <menuitem> <span>Item 2.4.5</span> </menuitem> <menuitem> <span>Item 2.4.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-2-5">Item 2.5</label>
                <input id="menu-item-2-5" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-2-5"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 2.5</span> </menuitem> <menuitem> <span>Item 2.5.1</span> </menuitem> <menuitem> <span>Item 2.5.2</span> </menuitem> <menuitem> <span>Item 2.5.3</span> </menuitem> <menuitem> <span>Item 2.5.4</span> </menuitem> <menuitem> <span>Item 2.5.5</span> </menuitem> <menuitem> <span>Item 2.5.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-2-6">Item 2.6</label>
                <input id="menu-item-2-6" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-2-6"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 2.6</span> </menuitem> <menuitem> <span>Item 2.6.1</span> </menuitem> <menuitem> <span>Item 2.6.2</span> </menuitem> <menuitem> <span>Item 2.6.3</span> </menuitem> <menuitem> <span>Item 2.6.4</span> </menuitem> <menuitem> <span>Item 2.6.5</span> </menuitem> <menuitem> <span>Item 2.6.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> </menu>
            </main>
          </nav>
          </menuitem> <menuitem>
          <label for="menu-item-3">Item 3</label>
          <input id="menu-item-3" type="checkbox">
          <nav>
            <main>
              <label class="menu-toggle" for="menu-item-3"><span>&nbsp;</span></label>
              <menu> <menuitem> <span class="heading">Item 3</span> </menuitem> <menuitem>
                <label for="menu-item-3-1">Item 3.1</label>
                <input id="menu-item-3-1" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-3-1"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 3.1</span> </menuitem> <menuitem> <span>Item 3.1.1</span> </menuitem> <menuitem> <span>Item 3.1.2</span> </menuitem> <menuitem> <span>Item 3.1.3</span> </menuitem> <menuitem> <span>Item 3.1.4</span> </menuitem> <menuitem> <span>Item 3.1.5</span> </menuitem> <menuitem> <span>Item 3.1.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-3-2">Item 3.2</label>
                <input id="menu-item-3-2" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-3-2"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 3.2</span> </menuitem> <menuitem> <span>Item 3.2.1</span> </menuitem> <menuitem> <span>Item 3.2.2</span> </menuitem> <menuitem> <span>Item 3.2.3</span> </menuitem> <menuitem> <span>Item 3.2.4</span> </menuitem> <menuitem> <span>Item 3.2.5</span> </menuitem> <menuitem> <span>Item 3.2.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-3-3">Item 3.3</label>
                <input id="menu-item-3-3" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-3-3"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 3.3</span> </menuitem> <menuitem> <span>Item 3.3.1</span> </menuitem> <menuitem> <span>Item 3.3.2</span> </menuitem> <menuitem> <span>Item 3.3.3</span> </menuitem> <menuitem> <span>Item 3.3.4</span> </menuitem> <menuitem> <span>Item 3.3.5</span> </menuitem> <menuitem> <span>Item 3.3.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-3-4">Item 3.4</label>
                <input id="menu-item-3-4" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-3-4"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 3.4</span> </menuitem> <menuitem> <span>Item 3.4.1</span> </menuitem> <menuitem> <span>Item 3.4.2</span> </menuitem> <menuitem> <span>Item 3.4.3</span> </menuitem> <menuitem> <span>Item 3.4.4</span> </menuitem> <menuitem> <span>Item 3.4.5</span> </menuitem> <menuitem> <span>Item 3.4.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-3-5">Item 3.5</label>
                <input id="menu-item-3-5" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-3-5"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 3.5</span> </menuitem> <menuitem> <span>Item 3.5.1</span> </menuitem> <menuitem> <span>Item 3.5.2</span> </menuitem> <menuitem> <span>Item 3.5.3</span> </menuitem> <menuitem> <span>Item 3.5.4</span> </menuitem> <menuitem> <span>Item 3.5.5</span> </menuitem> <menuitem> <span>Item 3.5.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-3-6">Item 3.6</label>
                <input id="menu-item-3-6" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-3-6"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 3.6</span> </menuitem> <menuitem> <span>Item 3.6.1</span> </menuitem> <menuitem> <span>Item 3.6.2</span> </menuitem> <menuitem> <span>Item 3.6.3</span> </menuitem> <menuitem> <span>Item 3.6.4</span> </menuitem> <menuitem> <span>Item 3.6.5</span> </menuitem> <menuitem> <span>Item 3.6.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> </menu>
            </main>
          </nav>
          </menuitem> <menuitem>
          <label for="menu-item-4">Item 4</label>
          <input id="menu-item-4" type="checkbox">
          <nav>
            <main>
              <label class="menu-toggle" for="menu-item-4"><span>&nbsp;</span></label>
              <menu> <menuitem> <span class="heading">Item 4</span> </menuitem> <menuitem>
                <label for="menu-item-4-1">Item 4.1</label>
                <input id="menu-item-4-1" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-4-1"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 4.1</span> </menuitem> <menuitem> <span>Item 4.1.1</span> </menuitem> <menuitem> <span>Item 4.1.2</span> </menuitem> <menuitem> <span>Item 4.1.3</span> </menuitem> <menuitem> <span>Item 4.1.4</span> </menuitem> <menuitem> <span>Item 4.1.5</span> </menuitem> <menuitem> <span>Item 4.1.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-4-2">Item 4.2</label>
                <input id="menu-item-4-2" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-4-2"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 4.2</span> </menuitem> <menuitem> <span>Item 4.2.1</span> </menuitem> <menuitem> <span>Item 4.2.2</span> </menuitem> <menuitem> <span>Item 4.2.3</span> </menuitem> <menuitem> <span>Item 4.2.4</span> </menuitem> <menuitem> <span>Item 4.2.5</span> </menuitem> <menuitem> <span>Item 4.2.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-4-3">Item 4.3</label>
                <input id="menu-item-4-3" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-4-3"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 4.3</span> </menuitem> <menuitem> <span>Item 4.3.1</span> </menuitem> <menuitem> <span>Item 4.3.2</span> </menuitem> <menuitem> <span>Item 4.3.3</span> </menuitem> <menuitem> <span>Item 4.3.4</span> </menuitem> <menuitem> <span>Item 4.3.5</span> </menuitem> <menuitem> <span>Item 4.3.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-4-4">Item 4.4</label>
                <input id="menu-item-4-4" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-4-4"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 4.4</span> </menuitem> <menuitem> <span>Item 4.4.1</span> </menuitem> <menuitem> <span>Item 4.4.2</span> </menuitem> <menuitem> <span>Item 4.4.3</span> </menuitem> <menuitem> <span>Item 4.4.4</span> </menuitem> <menuitem> <span>Item 4.4.5</span> </menuitem> <menuitem> <span>Item 4.4.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-4-5">Item 4.5</label>
                <input id="menu-item-4-5" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-4-5"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 4.5</span> </menuitem> <menuitem> <span>Item 4.5.1</span> </menuitem> <menuitem> <span>Item 4.5.2</span> </menuitem> <menuitem> <span>Item 4.5.3</span> </menuitem> <menuitem> <span>Item 4.5.4</span> </menuitem> <menuitem> <span>Item 4.5.5</span> </menuitem> <menuitem> <span>Item 4.5.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-4-6">Item 4.6</label>
                <input id="menu-item-4-6" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-4-6"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 4.6</span> </menuitem> <menuitem> <span>Item 4.6.1</span> </menuitem> <menuitem> <span>Item 4.6.2</span> </menuitem> <menuitem> <span>Item 4.6.3</span> </menuitem> <menuitem> <span>Item 4.6.4</span> </menuitem> <menuitem> <span>Item 4.6.5</span> </menuitem> <menuitem> <span>Item 4.6.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> </menu>
            </main>
          </nav>
          </menuitem> <menuitem>
          <label for="menu-item-5">Item 5</label>
          <input id="menu-item-5" type="checkbox">
          <nav>
            <main>
              <label class="menu-toggle" for="menu-item-5"><span>&nbsp;</span></label>
              <menu> <menuitem> <span class="heading">Item 5</span> </menuitem> <menuitem>
                <label for="menu-item-5-1">Item 5.1</label>
                <input id="menu-item-5-1" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-5-1"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 5.1</span> </menuitem> <menuitem> <span>Item 5.1.1</span> </menuitem> <menuitem> <span>Item 5.1.2</span> </menuitem> <menuitem> <span>Item 5.1.3</span> </menuitem> <menuitem> <span>Item 5.1.4</span> </menuitem> <menuitem> <span>Item 5.1.5</span> </menuitem> <menuitem> <span>Item 5.1.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-5-2">Item 5.2</label>
                <input id="menu-item-5-2" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-5-2"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 5.2</span> </menuitem> <menuitem> <span>Item 5.2.1</span> </menuitem> <menuitem> <span>Item 5.2.2</span> </menuitem> <menuitem> <span>Item 5.2.3</span> </menuitem> <menuitem> <span>Item 5.2.4</span> </menuitem> <menuitem> <span>Item 5.2.5</span> </menuitem> <menuitem> <span>Item 5.2.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-5-3">Item 5.3</label>
                <input id="menu-item-5-3" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-5-3"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 5.3</span> </menuitem> <menuitem> <span>Item 5.3.1</span> </menuitem> <menuitem> <span>Item 5.3.2</span> </menuitem> <menuitem> <span>Item 5.3.3</span> </menuitem> <menuitem> <span>Item 5.3.4</span> </menuitem> <menuitem> <span>Item 5.3.5</span> </menuitem> <menuitem> <span>Item 5.3.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-5-4">Item 5.4</label>
                <input id="menu-item-5-4" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-5-4"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 5.4</span> </menuitem> <menuitem> <span>Item 5.4.1</span> </menuitem> <menuitem> <span>Item 5.4.2</span> </menuitem> <menuitem> <span>Item 5.4.3</span> </menuitem> <menuitem> <span>Item 5.4.4</span> </menuitem> <menuitem> <span>Item 5.4.5</span> </menuitem> <menuitem> <span>Item 5.4.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-5-5">Item 5.5</label>
                <input id="menu-item-5-5" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-5-5"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 5.5</span> </menuitem> <menuitem> <span>Item 5.5.1</span> </menuitem> <menuitem> <span>Item 5.5.2</span> </menuitem> <menuitem> <span>Item 5.5.3</span> </menuitem> <menuitem> <span>Item 5.5.4</span> </menuitem> <menuitem> <span>Item 5.5.5</span> </menuitem> <menuitem> <span>Item 5.5.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-5-6">Item 5.6</label>
                <input id="menu-item-5-6" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-5-6"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 5.6</span> </menuitem> <menuitem> <span>Item 5.6.1</span> </menuitem> <menuitem> <span>Item 5.6.2</span> </menuitem> <menuitem> <span>Item 5.6.3</span> </menuitem> <menuitem> <span>Item 5.6.4</span> </menuitem> <menuitem> <span>Item 5.6.5</span> </menuitem> <menuitem> <span>Item 5.6.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> </menu>
            </main>
          </nav>
          </menuitem> <menuitem>
          <label for="menu-item-6">Item 6</label>
          <input id="menu-item-6" type="checkbox">
          <nav>
            <main>
              <label class="menu-toggle" for="menu-item-6"><span>&nbsp;</span></label>
              <menu> <menuitem> <span class="heading">Item 6</span> </menuitem> <menuitem>
                <label for="menu-item-6-1">Item 6.1</label>
                <input id="menu-item-6-1" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-6-1"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 6.1</span> </menuitem> <menuitem> <span>Item 6.1.1</span> </menuitem> <menuitem> <span>Item 6.1.2</span> </menuitem> <menuitem> <span>Item 6.1.3</span> </menuitem> <menuitem> <span>Item 6.1.4</span> </menuitem> <menuitem> <span>Item 6.1.5</span> </menuitem> <menuitem> <span>Item 6.1.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-6-2">Item 6.2</label>
                <input id="menu-item-6-2" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-6-2"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 6.2</span> </menuitem> <menuitem> <span>Item 6.2.1</span> </menuitem> <menuitem> <span>Item 6.2.2</span> </menuitem> <menuitem> <span>Item 6.2.3</span> </menuitem> <menuitem> <span>Item 6.2.4</span> </menuitem> <menuitem> <span>Item 6.2.5</span> </menuitem> <menuitem> <span>Item 6.2.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-6-3">Item 6.3</label>
                <input id="menu-item-6-3" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-6-3"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 6.3</span> </menuitem> <menuitem> <span>Item 6.3.1</span> </menuitem> <menuitem> <span>Item 6.3.2</span> </menuitem> <menuitem> <span>Item 6.3.3</span> </menuitem> <menuitem> <span>Item 6.3.4</span> </menuitem> <menuitem> <span>Item 6.3.5</span> </menuitem> <menuitem> <span>Item 6.3.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-6-4">Item 6.4</label>
                <input id="menu-item-6-4" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-6-4"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 6.4</span> </menuitem> <menuitem> <span>Item 6.4.1</span> </menuitem> <menuitem> <span>Item 6.4.2</span> </menuitem> <menuitem> <span>Item 6.4.3</span> </menuitem> <menuitem> <span>Item 6.4.4</span> </menuitem> <menuitem> <span>Item 6.4.5</span> </menuitem> <menuitem> <span>Item 6.4.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-6-5">Item 6.5</label>
                <input id="menu-item-6-5" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-6-5"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 6.5</span> </menuitem> <menuitem> <span>Item 6.5.1</span> </menuitem> <menuitem> <span>Item 6.5.2</span> </menuitem> <menuitem> <span>Item 6.5.3</span> </menuitem> <menuitem> <span>Item 6.5.4</span> </menuitem> <menuitem> <span>Item 6.5.5</span> </menuitem> <menuitem> <span>Item 6.5.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> <menuitem>
                <label for="menu-item-6-6">Item 6.6</label>
                <input id="menu-item-6-6" type="checkbox">
                <nav>
                  <main>
                    <label class="menu-toggle" for="menu-item-6-6"><span>&nbsp;</span></label>
                    <menu> <menuitem> <span class="heading">Item 6.6</span> </menuitem> <menuitem> <span>Item 6.6.1</span> </menuitem> <menuitem> <span>Item 6.6.2</span> </menuitem> <menuitem> <span>Item 6.6.3</span> </menuitem> <menuitem> <span>Item 6.6.4</span> </menuitem> <menuitem> <span>Item 6.6.5</span> </menuitem> <menuitem> <span>Item 6.6.6</span> </menuitem> </menu>
                  </main>
                </nav>
                </menuitem> </menu>
            </main>
          </nav>
          </menuitem> </menu>
      </main>
    </nav>
  </form>
</header>