body{ font-size: 14px; } ul ,li{ margin:0px; padding:0px; list-style: none; } .box{ 1000px; height: 40px; background:rgba(0,0,255,.7); color: white; text-align: center; transform: skew(-45deg) } .box > ul{ margin-left: 21px; margin-right: 21px; transform: skew(45deg) } .box > ul:after{ content: ""; display: block; clear: both; } .box > ul li{ 100px; line-height: 40px; height: 40px; float: left; position: relative; } .box > ul li span{ display: block; 100%; position: absolute; left: 0px; top:0px; } .box > ul li span:first-child{ height: 0; transition: height .5s; background-color: rgb(0,0,255); z-index: -1; } .box > ul li span:last-child{ height: 100%; z-index: 1; } .box > ul li:hover span:first-child{ height: 100%; }
<div class="box"> <ul> <li><span></span><span>首页</span></li> <li><span></span><span>关于我们</span></li> <li><span></span><span>联系我们</span></li> <li><span></span><span>公司简介</span></li> </ul> </div>