CodePen

HTML

            
              
  
  <ul id="nav">
    <li>
      <a href="javascript:void(0);">art</a>
    </li>
    <li>
      <a href="javascript:void(0);">archive</a>
    </li>
    <li>
      <a href="javascript:void(0);">about</a>
    </li>
     <li>
      <a href="javascript:void(0);">blog</a>
    </li>
    <li class="active">
      <a href="javascript:void(0);">contact</a>
    </li>
       </ul>
  
  
  
  

            
          
!

CSS

            
              body{background:#f9d867; margin:0; padding:0;}
#nav{display:block; background:#f5f5f5;  
  -moz-box-shadow:    0 0 4px 0px #999;
  -webkit-box-shadow: 0 0 4px 0px #999;
  box-shadow:         0 0 4px 0px #999; margin:0; padding:40px 20px; list-style:none; text-align:center; }
#nav li{display:inline-block;}
#nav li a{display:block; padding:10px 15px; font:1em "Arial Black", Gadget, sans-serif; color:#444; text-decoration:none; text-transform:uppercase;}
#nav li a:hover{color:#999;}
#nav li.active a{background:#fff; 
  -moz-box-shadow:    5px 5px 0px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.1);
  box-shadow:        5px 5px 0px 0px rgba(0, 0, 0, 0.1);}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function(){
  $('#nav a').on('click',function(){
     $('#nav li').removeClass('active');
     $(this).parent().addClass('active');
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................