<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul{ overflow: hidden;} ul li{ list-style: none; float: left; width: 90px; position: relative; display: inline-block; -webkit-transition: all .2s cubic-bezier(.4,0,1,1); transition: all .2s cubic-bezier(.4,0,1,1); } ul li a{ position: relative; color: #333; text-decoration: none; text-align: center; line-height: 70px; font-size: 14px; display: block; z-index: 100; /*background: #9c0;*/ } li:nth-child(1)::after { background: #b9d329; } li:nth-child(2)::after { background: #c0ebf7 } li:nth-child(3)::after { background: #b3aff7 } li:nth-child(4)::after { background: #f7c2c7 } li:nth-child(5)::after { background: #dbf737 } li:nth-child(6)::after { background: #ddc9f7 } li:nth-child(7)::after { background: #acf7e7 } li:nth-child(8)::after { background: #f7dfa4 } li::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 70px; top: 66px; -webkit-transition: .2s all ease-in-out; transition: .2s all ease-in-out; z-index: 1; } li.on::after{ top:0; left:0; } </style> </head> <body> <nav> <ul> <li><a href="javascript:;">首页</a></li> <li><a href="javascript:;">首页</a></li> <li><a href="javascript:;">首页</a></li> <li><a href="javascript:;">首页</a></li> <li><a href="javascript:;">首页</a></li> <li><a href="javascript:;">首页</a></li> <li><a href="javascript:;">首页</a></li> <li><a href="javascript:;">首页</a></li> </ul> </nav> <script src="jquery-1.9.1.min.js"></script> <script> $(function(){ $('ul li').mouseover(function(){ $(this).addClass('on') }); $('ul li').mouseout(function(){ $(this).removeClass('on') }); }) </script> </body> </html>