Working with transitions

<ul class="house-col-6">
<li><a href="#" title="">home</a><span class="hover-menu"></span></li>
<li><a href="#" title="">project1</a><span class="hover-menu"></span></li>
<li><a href="#" title="">project2</a><span class="hover-menu"></span></li>
<li><a href="#" title="">project3</a><span class="hover-menu"></span></li>
<li><a href="#" title="">contact</a><span class="hover-menu"></span></li>
</ul>
.hover-menu{
display: block; /***/
width: 90%;
margin: 0 auto;
background: #5aae2c;
position: absolute;
top:-40%;/***/
height: 40%;

}
li:first-of-type .hover-menu,li:hover .hover-menu{
top:0;/***/
-webkit-transition: top  1s ease;
-o-transition: top  1s ease;
transition: top  1s ease;
}