CodePen

HTML

            
              
<div class="nav">
<a href="#">LINK 1</a>
<a href="#">LINK 2</a>
<a href="#">LINK 3</a>
<a class="active" href="#">LINK 4</a>
<a class="last" href="#">LINK 5</a>
</div>

            
          
!
via HTML Inspector

CSS

            
              html, body, ul, li, a{margin:0;padding:0}

     .nav {
      width:750px; /* or percent or em's */      
      margin:0 auto;
      margin-top:24px;
      list-style:none;    
      background:#000;
      text-align:center;
      }
		
		.nav a{
      font-size:14px;
      font-weight:700;
      color:#ddd;      
			display:inline-block;
			padding:10px 20px;
      text-decoration:none;
      border-left:1px solid #999;
      margin-right:-4px;        
      }
    .last{border-right:1px solid #999;}
		.nav a:hover{
      color:#fff;
      background:#368;
      }
      .nav  a.active,
      .nav  a.active:hover{
      color:#eee;
      background:#368;
      }
      
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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