michaelbragg/fluid-nav.html

## fluid-nav.html
<!Doctype html>

<html>

  <head>

  <title>Fluid Navigation</title>

  <!--  Only for testing purposes  -->
  <link rel="stylesheet" type="text/css" href="http://necolas.github.com/normalize.css/2.1.0/normalize.css">

  <style>

    /*  --  Nav Object – http://csswizardry.com/2011/09/the-nav-abstraction/  -- */

    .nav {
      margin-left: 0;
      padding-left: 0;
      list-style: none;
    }
      .nav > li,
      .nav > li > a {
        display: inline-block;
      }

    /*  --  Nav Styling  -- */

    .nav__site > li {
      width: 14.2857%; /*  --  Nav Items / 100 = width%  --  */
    }

    .nav__site > li > a {
      display: block; /*  --  Makes anchor fill li object  --  */
      background: lime;
      line-height: 2em;
      text-align: center;
    }

    .nav__site > li > a:hover {
      background: purple;
    }

  </style>


  </head>

  <body>

  <nav class="nav__main" role="navigation">

  <ul class="nav nav__site">
       <li><a href="#a">Link #1</a></li><!--
    --><li><a href="#b">Link #2</a></li><!--
    --><li><a href="#c">Link #3</a></li><!--
    --><li><a href="#d">Link #4</a></li><!--
    --><li><a href="#e">Link #5</a></li><!--
    --><li><a href="#f">Link #6</a></li><!--
    --><li><a href="#g">Link #7</a></li>
  </ul>

  </nav>

  </body>

</html>