CodePen

HTML

            
              <nav role="navigation">
  <a href="#p1">Primary</a>
  <a href="#p2">Primary</a>
  <div class="dropdown">
    <a href="#p3">Primary</a>
    <nav>
      <a href="#s1">Secondary</a>
      <a href="#s2">Secondary</a>
      <a href="#s3">Secondary</a>
      <div class="dropdown">
        <a href="#s4">Secondary</a>
        <nav>
          <a href="#t1">Tertiary</a>
          <a href="#t2">Tertiary</a>
          <a href="#t3">Tertiary</a>
          <a href="#t4">Tertiary</a>
        </nav>
      </div>
      <a href="#s5">Secondary</a>
    </nav>
  </div>
  <a href="#p4">Primary</a>
  <a href="#p5">Primary</a>
  <a href="#p6">Primary</a>
</nav>

<section role="main">
  <article role="article">
    <header role="heading">
      <h1>Semantic Nested Navigation</h1>
      <p>
        Grab this code and navigate/listen to it using ChromeVox then do the same thing with UL tertiary navigation
      </p>
    </header>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro cum non explicabo magni enim autem architecto temporibus perferendis sapiente. Vitae eum unde debitis dolorem nisi ab fugiat eligendi optio.
    </p>
  </article>
</section>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              *
  margin: 0;
  padding: 0;
  text-align: center;
  text-decoration: none;
  line-height: 60px;
$cf
  clearfix()
blue = #00a6fc

a
  display: block;

[role="navigation"]
  @extend $cf
  *
    background: blue;
  a
    color: #fff;
    text-shadow: 0 1px 0 darken(blue, 30%);
    &:hover, &:focus
      background: lighten(blue, 10%);
  > a, > div
    float: left;
    width: 16.666667%;
    position: relative;
  > .dropdown
    > nav
      display: none;
      position: absolute;
      top: 100%;
      width: 100%;
      > .dropdown
        position: relative;
        > nav
          display: none;
          position: absolute;
          top: 0;
          left: 100%;
          width: 100%;
        &:hover
          a
            background: darken(blue, 40%);
            &:hover
              background: darken(blue, 30%);
          > nav
            display: block;
    &:hover
      a
        background: darken(blue, 10%);
      > nav
        display: block;
        a
          background: darken(blue, 20%);
          &:hover
            background: darken(blue, 15%);

[role="main"]
  margin: 30px;
  color: #444;
  *
    text-align: left;
  header
    margin-bottom: 20px;
  h1
    line-height: 32px !important;
    margin-bottom: 5px;
  p    
    line-height: 24px !important;
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................