ul { /* OPTIONAL STYLES */ list-style: none; margin: 0; padding :0; font-size: 0; } li { /* REQUIRED STYLES */ position: relative; background: red; /* OPTIONAL STYLES */ display: inline-block; width: 100px; height: 30px; } li a { /* REQUIRED STYLES */ position: absolute; width: 100%; height: 100%; z-index: 999; /* OPTIONAL STYLES */ display: inline-block; text-align: center; line-height: 30px; color: #fff; font-family: 'Hevletica Neue', Helvetica, Arial, Verdana, sans-serif; font-size: 12px; } li span { /* REQUIRED STYLES */ position: relative; display: block; background: black; -webkit-transition: all 280ms ease; -moz-transition: all 280ms ease; -o-transition: all 280ms ease; transition: all 280ms ease; /* OPTIONAL STYLES */ height: 30px; color: #fff; } li:hover span { /* REQUIRED STYLES */ -webkit-transition: all 280ms ease; -moz-transition: all 280ms ease; -o-transition: all 280ms ease; transition: all 280ms ease; /* OPTIONAL STYLES */ top: -30px; }
<ul> <li><a href="/home">Home</a><span></span></li> <li><a href="/media">Media</a><span></span></li> <li><a href="/news">News</a><span></span></li> <li><a href="/about">About</a><span></span></li> </ul>