实现方法很简单，即刚开始让下拉的菜单隐藏，然后当鼠标经过的时候，将隐藏的菜单显示即可，具体实现代码如上的红色部分，这里不作详细讲解，代码很简单。
第二种：用jquery实现。
css:
*{ margin:0px; padding:0px; font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; } li{ list-style: none; } a{ text-decoration: none; } .nav{ width:100%; height: 40px; margin-top:50px; background-color: #222; } .nav .nav-list{ width: 1000px; height: 40px; margin:0 auto; } .nav .nav-list li{ float: left; position: relative; } .nav .nav-list li > a{ display: block; height: 40px; line-height: 40px; padding:0 30px; color:#aaa; width:60px; } .nav .nav-list li:hover>a{ color:#fff; background-color: #333; } .nav-down{ width:150px; background-color: #333; position: absolute; top:40px; left:0px; display: none; } .nav .nav-list .nav-down a{ display: block; line-height: 30px; color:#aaa; padding-left:30px; } .nav .nav-list .nav-down a:hover{ color:#fff; background-color: #333; }
jquery:
$(function(){ $(".nav .nav-list li").hover(function(){ $(this).find(".nav-down").stop().slideDown() },function(){ $(this).find(".nav-down").stop().slideUp() }); });
实现方法之前也讲过，在仿造百度换肤功能的部分，在这里采用的是slideDown()和slideUp()方法，如果想要设置变化时间，可以直接在括号中填入时间即可。
第三种：用jquery.easing实现。
css的样式跟用jquery实现的样式一样，这里就不增加空间再复制一遍了。
jquery:
<pre>$(function(){ $(".nav .nav-list li").hover(function(){ $(this).find(".nav-down").stop().slideDown({duration:500,easing:"easeOutBounce"}) },function(){ $(this).find(".nav-down").stop().slideUp({duration:500,easing:"easeOutBounce"}) }); });
使用这种方法实现时记得引进包jquery.easing.1.3.min.js（我用的是这个版本，大家可以自行在网上下载）。在这里重点说一下思路：当鼠标移动的时候， 弹性下拉菜单会跟随着下滑，当鼠标移开的时候，弹性下拉菜单会上滑，同样用到了前面所说的slideDown()和slideUp()方法，唯一不同的是在这里增加了动画，即采用easing实现，它其实就是类似于json的格式，插入duration和easing方式就可以，如果不懂里面的实现过程，可以查一下相关的说明文档，看看就会了。
4、摩擦运动动画跟随的导航条
实现思路就是：将鼠标移动的时候，把横条的位置移动到当前文字的下方。所以需要获取当前鼠标移动到的位置，即top和left，然后将横条的top和left相应地改变就可以实现，具体实现如下。
html:（这里只贴上一个页面的代码）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>摩擦运动动画跟随的导航条</title> <link href="https://www.jb51.net/css/demo7.css"> <script src="https://www.jb51.net/js/jquery-3.1.0.min.js" language="javascript" charset="utf-8"></script> <script src="https://www.jb51.net/js/jquery.easing.1.3.min.js" language="javascript" charset="utf-8"></script> <script src="https://www.jb51.net/js/demo7.js" language="javascript" charset="utf-8"></script> </head> <body> <div> <div> <ul> <li><a href="https://www.jb51.net/index.html">首页</a></li> <li><a href="https://www.jb51.net/bbs.html">论坛</a></li> <li><a href="https://www.jb51.net/blog.html">博客</a></li> <li><a href="https://www.jb51.net/mall.html">商城</a></li> <li><a href="https://www.jb51.net/download.html">下载</a></li> </ul> <div></div> </div> </div> </body> </html>
css:
*{ margin:0px; padding: 0px; font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; } li{ list-style: none; } a{ text-decoration: none; } .nav{ width:100%; height:40px; margin-top:50px; background-color: #f6f6f6; } .nav .nav-content{ width:1000px; margin:0 auto; height: 40px; position: relative; } .nav .nav-list li{ float: left; } .nav .nav-list li a{ color:#333; height: 40px; line-height: 40px; display: block; padding:0 30px; } .nav .nav-line{ height:3px; background: #35b558; width:100px; position: absolute; top:40px; left:0px; } .nav .nav-list li a:hover{ color:#35b558; } .nav .nav-list li a.on{ color:#35b558; }
jquery: