效果图：

代码如下：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title script src=' http :http://www .21岁的凯文。com/js/jquery-1。8 .3 .量滴js ' type=' text/JavaScript ' charset=' utf-8 '/script script src=' http 3360http://www .21岁的凯文。com/js/move。js ' type=' text/JavaScript ' charc划水：0;} .盒子{宽度：1100像素高度： 70px余量： 100像素自动；背景hotpinkpadding: 0 0 0 200px盒子尺寸：边框盒子；} .nav {float:左侧；高度： 70px线高： 55px相对位置：光标：指针；} .nav-now {背景： URL(图片/nav _ now _ BG。png)中心50px无重复；} .nav h1 { font-size : 24px} .盒子。导航nav { margin-left : 50px；} .盒子nav span { width: 25px高度： 25px绝对位置：背景： URL(图片/nav _肖建图。巴布亚新几内亚)中心无重复；top : 15 pxright :-35px；} .导航ul{position:绝对值；背景热粉色宽度： 160像素；top : 70pxleft :-15px；显示器：无；} .nav ul li{list-style:无；线高：正常；padd : 10px 0 10px 20pxcursor :指针；transit :填充-左0.5s轻松感}。nav ul Li :悬停{背景：黄绿色URL(图片/nav _ Li _ BG。png)142 px中心无重复；左填充left:35px}。nav :悬停{背景： URL(图片/nav _ now _ BG。png)中心50px无重复；}/style/head body div class=' box ' div class=' nav has-nav-now ' h1一级菜单/h1 span/span ul li二级菜单/li li二级菜单/li li二级菜单/li li二级菜单/li li二级菜单/li li二级菜单/Li/ul/div class=' nav has-nav ' h1一级菜单/h1 span/span ul li二级菜单/li li二级菜单/li li二级菜单/li li二级菜单/li li二级菜单/li li二级菜单/Li/ul/div class=' nav has-nav ' h1一级菜单/h1 span/span ul li二级菜单/li li二级菜单/li li二级菜单/li li二级菜单/li li二级菜单/li li二级菜单/Li/ul/div class=' nav ' h1一级菜单/h1/div/div/body script $(function(){ $(').has-nav ').悬停(function(){ $(this)).查找(' ul ').向下滑动(600,'弹性cout’)；}，function(){ $(this).查找(' ul ').停止()。向上滑动(100);});$('.nav ').单击(function(){ $(this)).addClass('nav-now ').兄弟姐妹()。remove CLaSS(' nav-now ')})})/script/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！