A Pen by Deepankar Bajpeyi.

index.html

<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<ul class="bmenu">
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Team</a></li>
  <li><a href="#">Lab</a></li>
  <li><a href="#">Contact</a></li>
</ul>  

Simple-css3-navigation-hover-affect.markdown

Simple css3 navigation hover affect

A Pen by Deepankar Bajpeyi on CodePen.

License.

style.css

body{
  background-color : #e74c3c;
  font-family: 'Lato', sans-serif;
}

.bmenu {
  padding-top : 0px;
  text-align :center;
  margin  : 0 0 10px 0;
  position : relative;
 }

.bmenu li{
  font-size : 20px;
  font-weight : bold;
  display : inline;
  padding : 20px;
  border-right : 1px solid rgba(20,0,0,0.4);
 }

.bmenu li a{
  color :transparent;
  padding : 15px;
  text-decoration : none;
  display :inline;
  text-transform : uppercase;
  text-shadow : 0px 0px 1px #fff;
  letter-spacing : 1px;
  --webkit-transition : all 0.2s ease-in-out;
  --o-transition : all 0.2s ease-in-out;
  --moz-transition : all 0.2s ease-in-out;
  --ms-transition : all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.bmenu:hover li a{
  text-shadow : 0px 0px 10px #fff;
  
}
.bmenu li a:hover{
  color : #fff;
  text-shadow : 0px 0px 1px #fff;
  border-bottom : 8px solid rgba(20,0,0,0.5);
  border-radius : 2px;
  box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
    
}