CodePen

HTML

            
              <div class="nav">
    <ul>
        <li>
            <a href="#">Home</a>
        </li><li>
            <a href="#">Products</a>
        </li><li>
            <a href="#">Services</a>
        </li><li>
            <a href="#">About</a>
        </li><li>
            <a href="#">Contact</a>
        </li>
    </ul>
</div>
            
          
!
via HTML Inspector

CSS

            
              /* Important styles */
.nav { text-align: center; }
  .nav ul, .nav li, .nav a { display: inline-block; *display: inline; zoom: 1; }

/* Fancy aesthetic styling */
.nav { font: 14px sans-serif; margin: 20px 0; }
.nav ul { background: #333; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.5); margin: 0; overflow: hidden; padding: 0; }
  .nav a { 
    background-color: #555555;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#333333));
    background-image: -webkit-linear-gradient(top, #555555, #333333);
    background-image:    -moz-linear-gradient(top, #555555, #333333);
    background-image:      -o-linear-gradient(top, #555555, #333333);
    background-image:         linear-gradient(to bottom, #555555, #333333);  
    color: #f1f1f1; padding: 10px 15px; text-decoration: none;
  }
  .nav a:hover {
    background-color: #444444;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#333333));
    background-image: -webkit-linear-gradient(top, #444444, #333333);
    background-image:    -moz-linear-gradient(top, #444444, #333333);
    background-image:      -o-linear-gradient(top, #444444, #333333);
    background-image:         linear-gradient(to bottom, #444444, #333333);  
  }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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