A CodePen by Micah Blu. Fluid Navigation with evenly spaced tabs - ever have a navigation where you want the tabs to be all the same width and span the entire width of the layout? this aims at helping to do just that and is dynamic so as you add or subtract menu items, it will adjust accordingly

index.html

<nav>
  <ul>
    <li><span>Home</span></li>
    <li><span>About</span></li>
    <li><span>Our Work</span></li>
    <li><span>Blog</span></li>
    <li><span>Contact</span></li>
  </ul>
</nav>

script.js

//alert($('nav').width());
$('nav li').css('width', 1 / $('nav li').length * 100 + '%');

style.css

nav{
  height: 1000px;
  clear:both; 
}

nav ul{
  padding:0px;
}

nav ul li{
  float:left;
  font-family: helvetica;
  list-style:none;
  padding: 15px 20px;
  background: -webkit-linear-gradient(top, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%);
  border-right: 1px solid #f2f2f2;  
  box-sizing:border-box;  
  text-align:center;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  color: #333;
  font-family: Open Sans;
  font-weight: 900;
}
nav ul li span{
  color: rgba(250,250,250, .7);
}

nav ul li:last-child{
  border-right:0px;
}