<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Menu 3</title>
</head>
<body>
  <div class="menu">
  <ul>
    <li><a href="#">Menu 1</a></li>  
    <li><a href="#">Menu 2</a></li> 
    <li><a href="#">Menu 3</a></li> 
    <li><a href="#">Menu 4</a></li> 
    <li><a href="#">Menu 5</a></li> 
    <li><a href="#">Menu 6</a></li> 

    
  </ul>
</div>
</body>
</html>

.menu
{
  margin: 0 auto;
  width:800px;
}
ul 
{
  list-style-type:none;
  position:absolute;
}

ul li 
{
  float:left;
  
}

ul li a 
{
  text-decoration:none;
  width:100px;
  display:block;
  height:50px;
  background: #7986cb;
  font :bold 15px/50px arial, serif;
  text-align:center;
  color:#fff;
  letter-spacing: 2px;
  transition: all .2s;
  position: relative;
  transition:ease 0.2sn;
}
ul li a:after {
  content:"";
  position:absolute;
  bottom:0;
  height: 4px;
  width: 0;
  background-color: #000;
  left:0;
  transition: width .5s;
}
ul li a:hover:after
{
  width:100%;
  left:0;
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.