CodePen

HTML

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

            
          
!

↑ Insert the most common viewport meta tag

CSS

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

     .nav ul{
      width:750px; /* or percent or em's */      
      margin:0 auto;
      margin-top:24px;
      list-style:none;    
      background:#000;
      text-align:center;
  	  }
		.nav ul li{      
			display:inline;  
		  }
		.nav ul li 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 ul li a:hover{
      color:#fff;
      background:#368;
      }
      .nav ul li a.active,
      .nav ul li 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 ..................