<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<nav id="horz"> 
    <a href="#">Home</a>
    <a href="#">About Me</a>
    <a href="#">Portfolio</a>
    <a href="#">Latest Work</a>
    <a href="#">Contact</a>
    <a href="#">Newsletter</a>   
</nav>
html{background:#A40C0C;}

#horz, #horz a {
    margin:0;
    padding:0;
}
#horz {

    margin:60px auto;
    border:1px solid #990000;
    border-radius:6px;
    width:600px;
    background-color:#990000;
    font-family:'Oswald', sans-serif;
    font-size:14px;
    height:40px;
    box-shadow:0px 3px 2px 0px #3D0000;
}
#horz a {
    float:left;
    line-height:15px;
    padding:13px 18px;
    text-decoration:none;
    word-wrap:normal;
    border-left:1px solid #CC0000;
    /* light one */
    border-right:1px solid #730000;
    color:#fff;
    text-shadow: 0 2px 1px #370000;
    text-indent:5px;
      

}
#horz a:first-child {
    border-left:0px solid #4C0000;
    border-top-left-radius:6px;
    border-bottom-left-radius:6px;
}
#horz a:last-child {
    border-right:0px solid #4C0000;
}
#horz a:hover {
    background-color:#800000;   
}
.horz{
    background-color:#800000;    
}
$(document).ready(function () {

    
$("#horz").on("click", "a", function () {  

  $(this).addClass("horz").siblings().removeClass("horz");

    }); 
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js