CodePen

HTML

            
              <nav>
  <ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>  
            
          
!
via HTML Inspector

CSS

            
              * {
  box-sizing:border-box;
}

nav {
  width:960px;
  margin: 20px auto 0;
}

ul {
  text-align:center;
  font-size:0;
}

li {
  display:inline-block;
  width:25%;
  border-right:1px groove lightgrey;
  background:lightgrey;
}

li:hover {
  background:#bada55;
}

li.active {
  background:red;
}

li:last-of-type {
  border-right:none;
}

a {
  text-decoration:none;
  font-size:24px;
  line-height:1.5em;
  text-align:center;
  color:grey;
  display:block;
}

li.active a,
a:hover {
  color:black;
}


            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function() {
   $("li").click(function() {
      // remove classes from all
      $("li").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................