CodePen

HTML

            
              
<div class="content">
<nav role='navigation'>
  <ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav> 


</div>
            
          
!
via HTML Inspector

CSS

            
              nav {
  text-decoration:none;
  margin-top:25px;
}

ul {
  text-align:center;
  font-size:0;
  background:lightgrey;
}

li {
  display:inline-block;
  font-size:16px;
}

li { /* borders */
  border-bottom:1px solid rgb(220,220,220);
  border-left:1px solid rgb(220,220,220);
  border-right:1px solid rgb(180,180,180);
}

li:first-of-type {
  border-left:none;
}

li.active {
  border-bottom:lightgrey;
  }

li.active a {
  border-bottom:lightgrey;
}
a {
  text-decoration:none;
  display:block;
  height:50px;
  line-height:50px;
  padding:0 20px;
  background:lightgrey;
  color:rgb(100,100,100);
  font-weight:bold;
  border-bottom:1px solid rgb(180,180,180);
}

.content {
  width: 960px;
  margin:0 auto;
  background:lightgrey;
  height:150px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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