.nav { list-style:none; } .nav li { float:left; height:50px; width:100px; border:1px solid #EEEEEE; background:wheat; text-align:center; line-height:50px; position:relative; cursor:pointer; overflow:hidden; } .nav li>div { transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -webkit-transition:all .3s; } .nav li>div:first-child { position:absolute; bottom:0; left:0; right:0; background:aqua; } .nav li>div:last-child { position:absolute; bottom:-52px; left:0; right:0; background:red; } .nav li:hover>div:last-child { bottom:0; } .nav li:hover>div:first-child { bottom:52px; }