<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");
});
});
This Pen doesn't use any external CSS resources.