基于jQuery动画二级下拉导航菜单

春节回来给大家分享一款基于jQuery动画二级下拉导航菜单。鼠标经过的时候以动画的形式出现二级导航。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

 <div id="nav_main">
        <div class="inner1">
            <div class="inner2">
                <div id="nav_main_bar">
                    <ul>
                        <li class="current">
                            <div class="bm">
                                <div class="inner">
                                    <div class="inner3">
                                        <div class="inner4">
                                            <a href="http://www.w2bc.com">首页<br>
                                                Home</a></div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="bm">
                                <div class="inner">
                                    <div class="inner3">
                                        <div class="inner4">
                                            <a href="http://www.w2bc.com">关于我们<br>
                                                About Us</a></div>
                                    </div>
                                </div>
                            </div>
                            <div class="lm">
                                <div class="inner5">
                                    <div class="inner6">
                                        <ul>
                                            <li><a href="http://www.w2bc.com">朗文介绍&nbsp;Profile</a> </li>
                                            <li><a href="http://www.w2bc.com">教育理念&nbsp;Concept</a> </li>
                                            <li><a href="http://www.w2bc.com">企业文化&nbsp;Culture</a> </li>
                                            <li><a href="http://www.w2bc.com">教学环境&nbsp;Environment</a> </li>
                                            <li><a href="http://www.w2bc.com">联系我们&nbsp;Contact</a> </li>
                                            <li><a href="http://www.w2bc.com">合作伙伴&nbsp;Partners</a> </li>
                                            <li><a href="http://www.w2bc.com">招贤纳士&nbsp;Jobs</a> </li>
                                            <li class="clear"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="bm">
                                <div class="inner">
                                    <div class="inner3">
                                        <div class="inner4">
                                            <a href="http://www.w2bc.com">课程体系<br>
                                                Courses</a></div>
                                    </div>
                                </div>
                            </div>
                            <div class="lm">
                                <div class="inner5">
                                    <div class="inner6">
                                        <ul>
                                            <li><a href="http://www.w2bc.com">POCKETS™ 课程</a> </li>
                                            <li><a href="http://www.w2bc.com">BACKPACK™ 课程</a> </li>
                                            <li><a href="http://www.w2bc.com">SUITCASE™ 课程</a> </li>
                                            <li><a href="http://www.w2bc.com">名校计划&amp;优才课程</a> </li>
                                            <li><a href="http://www.w2bc.com">Phonics（自然拼读）课程</a> </li>
                                            <li><a href="http://www.w2bc.com">PTE少儿英语考试</a> </li>
                                            <li><a href="http://www.w2bc.com">朗文原版教材</a> </li>
                                            <li class="clear"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="bm">
                                <div class="inner">
                                    <div class="inner3">
                                        <div class="inner4">
                                            <a href="http://www.w2bc.com">师资力量<br>
                                                Teachers</a></div>
                                    </div>
                                </div>
                            </div>
                            <div class="lm">
                                <div class="inner5">
                                    <div class="inner6">
                                        <ul>
                                            <li><a href="http://www.w2bc.com">专家团队&nbsp;Experts</a> </li>
                                            <li><a href="http://www.w2bc.com">中教&nbsp;Tutor</a> </li>
                                            <li><a href="http://www.w2bc.com">外教&nbsp;Foreign Teacher</a> </li>
                                            <li class="clear"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="bm">
                                <div class="inner">
                                    <div class="inner3">
                                        <div class="inner4">
                                            <a href="http://www.w2bc.com">我们的会员<br>
                                                Members</a></div>
                                    </div>
                                </div>
                            </div>
                            <div class="lm">
                                <div class="inner5">
                                    <div class="inner6">
                                        <ul>
                                            <li><a href="http://www.w2bc.com">我们的会员&nbsp;Our members</a> </li>
                                            <li><a href="http://www.w2bc.com">会员中心&nbsp;Login</a> </li>
                                            <li><a href="http://www.w2bc.com">会员公告&nbsp;Notice</a> </li>
                                            <li><a href="http://www.w2bc.com">海外游学&nbsp;Study Tour</a> </li>
                                            <li class="clear"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="bm">
                                <div class="inner">
                                    <div class="inner3">
                                        <div class="inner4">
                                            <a href="http://www.w2bc.com">新闻中心<br>
                                                News</a></div>
                                    </div>
                                </div>
                            </div>
                            <div class="lm">
                                <div class="inner5">
                                    <div class="inner6">
                                        <ul>
                                            <li><a href="http://www.w2bc.com">最新新闻&nbsp;News</a> </li>
                                            <li><a href="http://www.w2bc.com">精彩活动&nbsp;Activity</a> </li>
                                            <li><a href="http://www.w2bc.com">欢乐相册&nbsp;Album</a> </li>
                                            <li><a href="http://www.w2bc.com">视频中心&nbsp;Video</a> </li>
                                            <li class="clear"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="bm">
                                <div class="inner">
                                    <div class="inner3">
                                        <div class="inner4">
                                            <a href="http://www.w2bc.com">陈慧珊专栏<br>
                                                Blog</a></div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="bm">
                                <div class="inner">
                                    <div class="inner3">
                                        <div class="inner4">
                                            <a href="http://www.w2bc.com">家长秘籍<br>
                                                Cheats</a></div>
                                    </div>
                                </div>
                            </div>
                            <div class="lm">
                                <div class="inner5">
                                    <div class="inner6">
                                        <ul>
                                            <li><a href="http://www.w2bc.com">站长素材</a> </li>
                                            <li><a href="http://www.w2bc.com">免费素材</a> </li>
                                            <li><a href="http://www.w2bc.com">素材中国</a> </li>
                                            <li><a href="http://www.w2bc.com">站长素材</a> </li>
                                            <li class="clear"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

via：http://www.w2bc.com/Article/24860