.nav {
    display: block;            
    overflow: hidden;  
}      

.nav ul {
    margin: 50px 0 0px 100px;
    padding: 5px 10px;
    float: left;
    list-style: none;
    border-bottom: none;
}
        
.nav li {
    float:left;
}
        
.nav a {
    float:left;
    padding: .8em 1.5em;
    text-decoration: none;
    color: #f0f0f0;
    font: 16px Arial;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: #222;
    border-left: 1px solid #cecece;         
}
         
.nav a:hover, .nav a:focus {
    outline: 0;
    color: #fff;
    background: #444;
}
        
.nav a:active {
    -moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
    -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
    box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}
         
        .nav li:first-child a {
            border-left: 0;
            -moz-border-radius: 4px 0 0 4px;
            -webkit-border-radius: 4px 0 0 4px;
            border-radius: 4px 0 0 4px;            
        }
        
        .nav li:last-child a {
            border-right: 0;
            -moz-border-radius: 0 4px 4px 0;
            -webkit-border-radius: 0 4px 4px 0;
            border-radius: 0 4px 4px 0;            
        } 
        
        .nav li a.active {
            background: #FFCC00;
            color: #222;
            font-weight: bold;
            padding: 20px 10px;
            margin-top: -8px;
            border-radius: 4px;
        }