CodePen

HTML

            
              
  
  <ul id="nav">
    <li>
      <a href="#">art</a>
    </li>
    <li>
      <a href="#">archive</a>
    </li>
    <li>
      <a href="#">about</a>
    </li>
     <li>
      <a href="#">blog</a>
    </li>
    <li class="active">
      <a href="#">contact</a>
    </li>
       </ul>
  
  
  
  

            
          
!
via HTML Inspector

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

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