A Pen by Brandon R. Stoner.

dtqGy.markdown

dtqGy

A Pen by Brandon R. Stoner on CodePen.

License.

index.html

<nav>
  <ul>
    <li data-level='1'><a href='#'>Example 1</a></li>
    <li data-level='2'><a href='#'>Example 2</a></li>
    <li data-level='3'><a href='#'>Example 3</a></li>
    <li data-level='2'><a href='#'>Example 4</a></li>
    <li data-level='2'><a href='#'>Example 5</a></li>
    <li data-level='1'><a href='#'>Example 6</a></li>
    <li data-level='3'><a href='#'>Example 7</a></li>
    <li data-level='1'><a href='#'>Example 8</a></li>
    <li data-level='1'><a href='#'>Example 9</a></li>
  </ul>
</nav>

style.css

html, body {
  background-color: #CCC;
}

nav ul {
  margin: 0px;
  padding: 0px;
  
  background-color: #FFF;
  list-style: none;
}

nav li {
  padding: 0.4ex 1em;
  display: inline-block;
}