CSS Navigation Bar

dabblet.css

/**
 * CSS Navigation Bar
 */


* {margin: 0; padding: 0;}

html {
  height: 100%;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  font-size: 87.5%;
}

body {
  display: flexbox;
  flex-pack: center;
  flex-align: center;
  height: 100%;
}

/** Navigation Module **/
dt, dd, .nav > li, .nav a {
  display: inline-block;
}

dl {
  padding: 1em 1.5em;
  background-image: linear-gradient(top, rgba(0,0,0,.01), rgba(0,0,0,.03));
  box-shadow: 
    0 1px 1px rgba(0,0,0,.2),
    0 -1px 4px rgba(0,0,0,.02) inset;
  border-radius: 3px;
}

dt {
  margin-right: 3em;
  font-weight: 600;
}

.nav > li {
  padding: .5em .7em;
}

.nav a {
  padding: .3em 1em;
  text-decoration: none;
  color: #b2b2b2;
  transition: color .3s ease-in-out;
}
  .nav a:hover {
    color: #333;
  }

.is-active {
  border-radius: 3px; 	
  background-color: #39425c;
  background-image: linear-gradient(top,rgba(76, 88, 121,.5), rgba(28, 33, 45,.5)), url(data:image/png;base64,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);
 }

   .is-active > a {
    border-radius: 3px;
    border: 1px dashed rgba(0,0,0,.5);
    box-shadow: 0 0 1px 1px rgba(255,255,255,.07) inset;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    transition: all .3s ease-in-out;
  }
  
    .is-active > a:hover {
      background-color: rgba(0,0,0,.2);
      border: 1px solid black;
      box-shadow: 
        0 1px 0 rgba(255,255,255,.2),
        0 1px 2px rgba(0,0,0,.5) inset;
      color: rgba(0,0,0,.9);
      text-shadow: 0 1px 0 rgba(255,255,255,.2);
    }

dabblet.html

<dl>
  <dt>
    Choose your Site:
  </dt>
  <dd>
    <ul class=nav>
      <li class=is-active>
        <a href=# >Home</a>
      </li>
      <li>
        <a href=#>Portfolio</a>
      </li>
      <li>
        <a href=#>About</a>
      </li>
      <li>
        <a href=#>Contact</a>
      </li>
    </ul>
  </dd>
</dl>

settings.json

{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}