<ul id="nav">
  <li ><a href="#" class="active">transition</a></li>
  <li><a href="#">property</a></li>
  <li><a href="#">duration</a></li>
  <li><a href="#">timing-function</a></li>
</ul>
body{
  font:1em Helvetica;
  background:#eee;
}

li{
  list-style:none;
}
a{
  text-decoration:none;
}
#nav li{
  float:left;
}
#nav a{
  display:block;
  padding:15px 30px;
  background:#000;
  color:#eee;
  transition:0.28s ease-in;
}
#nav a:hover,#nav a.active{
  background:#E73A38;
  color:#fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.