How to create a navigation with sliding background and integrate with Blogger?

I've shared how to create a sliding background button,this time using same technique,this time I've created a simple navigation menu,and also going to tell that how to integrate this technique in Blogger custom pages widget so lets have a look at the demo below.

The above pen have used the same technique of sliding background,just I've added it in a simple navigation.

To implement the same style in your Blogger pages widget,you must first remove the CSS associated with this navigation menu,that could be either with .PageList or #PageList1.Then add the following CSS just above ]]></b:skin>

.PageList{
  width:800px;
  margin:0 auto;
}
.PageList ul{
  padding:0;
  margin:0;
  list-style:none;
}
.PageList ul li{
  float:left;
}
.PageList ul li a{
  font:300 17px 'open sans',sans-serif;
  color:#fff;
  text-decoration:none;
  padding:10px 15px;
  background:#00bfff;
  display:block;
  position:relative;
}
.PageList ul li a:after{
  content:"";
  height:100%;
  position:absolute;
  background:rgba(0,0,0,0.5);
  width:0;
  top:0;
  left:50%;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}
.PageList ul li a:hover:after{
  left:0;
  width:100%;
}