jquery导航条，鼠标悬停上下滑动

炫酷的jQuery导航条，鼠标悬停上下滑动。
1、在head区域引入下面的代码

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://5.jimth.com/tpl/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#menu2 li a").wrapInner( '<span class="out"></span>' );
    $("#menu2 li a").each(function() {
        $( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
    });
    $("#menu2 li a").hover(function() {
        $(".out",this).stop().animate({'top':    '48px'},    300);
        $(".over",this).stop().animate({'top':    '0px'}, 300);
    }, function() {
        $(".out",this).stop().animate({'top':    '0px'}, 300);
        $(".over",this).stop().animate({'top':    '-48px'}, 300);
    });
});
</script>

2、在需要使用本导航的地方引入下面的代码：

<div id="menu2" class="menu">
    <ul>
        <li><a href="https://5.jimth.com" title="返回我爱模板网首页">首 页</a></li>
        <li><a href="#">CSS模板</a></li>
        <li><a href="#">PSD模板</a></li>
        <li><a href="#">网页特效</a></li>
        <li><a href="#">建站教程</a></li>
        <li><a href="#">导航栏特效</a></li>
        <li><a href="#">tab选项卡</a></li>
        <li><a href="#">网站源码</a></li>
        <li><a href="#">心境之旅</a></li>
    </ul>
    <div class="cls"></div>
</div>

3、将地址和内容换成自己的网站内容。