要折腾的效果如下图：
具体的效果请看DEMO ，点击此处打开。
像DEMO里的这个这样的FLASH导航，里面除了AS的一些条件的判断外，还有XML的脚本配置，真的是没有扎实的AS知识，想改造过来都很难，哈，还不如对脆直接模拟来做效果，且收录要比FLASH来得好哈。
想尝试用HTML5和CSS3应该可以实现的，但想想，浏览器的兼容性还是一个很大的问题，由于HTML5和CSS3项目中用得少，也比较菜，所以还是JS算了，但JS本身也非常的菜，JQuery略懂一些，就直接用JQuery来搞了，等以后浏览器都完美的支持HTML3和CSS3或我有空的时候，再来重新写一下这个效果哈。
说干就干，说做就做，首先来说一下思路。
这个分上下两个部分，上面是大分类，下面是二级分类，动画是一个向上，一个向下，动画利用JQuery中的animate可以做到，鼠标的移上和移出就是一个hover的事件进行触发，基本涉及的就主要是这两个函数了，其他的一些小地方就在实际的过程中进行细节调整就可以了。
于是就有了下面基于JQuery的核心脚本（这个代码有点长，其实没什么特别的地方，和我们平常写的基本一样，HTML和CSS请到DEMO页中查看，因有使用图片就不贴出来了）
$("#nav>li>a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );
$("#nav>li>a").each(function() {
$( '<span class="over"><strong>' + $(this).text() + '</strong></span>' ).appendTo( this );
});
$("#nav>li>a:not('.cur')").hover(function() {
$(".out",this).stop().animate({'top':'65px'},250); // 向下滑动 - 隐藏
$(".over",this).stop().animate({'top':'0px'},250); // 向下滑动 - 显示
$(".bg",this).stop().animate({'top':'0px'}, 120); // 向下滑动 - 显示
}, function() {
$(".out",this).stop().animate({'top':'0px'},250); // 向上滑动 - 显示
$(".over",this).stop().animate({'top':'65px'},250); // 向上滑动 - 隐藏
$(".bg",this).stop().animate({'top':'65px'},120); // 向上滑动 - 隐藏
});
$("#nav>li:not(':first'):not(':last')").hover(function() {
$(".navBg").stop().animate({'height':'44px'},120);
$(this).children(".snav").stop(true).css({"left":- $(this).position().left}).show();
}, function() {
$(".navBg").stop().animate({'height':'0px'},120);
$(this).children(".snav").stop(true).hide();
});
$(".snav>a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );
$(".snav>a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
