рони, а тормоза?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
nav{
background:#ccc;
color:#666;
font-size:14px;
height:56px;
text-transform:uppercase;
position:relative;
}
nav ul{
text-align:center;
padding:0;
display:flex;
list-style:none;
margin:0;
line-height:56px;
}
nav li{
flex:1;
}
nav li:hover span{
opacity: 1;
}
nav span{
opacity: 0;
position:absolute;
left:0;
top:56px;
width:100%;
background:#999;
color:#fff;
padding:0 10px;
box-sizing:border-box;
text-align:left;
transition: 2s;
}
</style>
</head>
<body>
<nav><ul>
<li>text<span>1 info</span></li>
<li>text<span>2 text text</span></li>
<li>text<span>3 text text</span></li>
<li>text<span>4 text </span></li>
<li>text<span>5 text text text text</span></li>
<li>text<span>6 text text</span></li>
</ul></nav>
</body>
</html>