jQuery水平下拉三级菜单

cbpHorizontalMenu是一款强大的多级菜单插件，你只要定义好菜单结构，即可生成下拉菜单效果。下拉效果，只有点击一级菜单才会出来效果哦。

分类：导航菜单 > 多级菜单难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

三级菜单结构图

<nav id="cbp-hrmenu" class="cbp-hrmenu">
    <ul>
        <li>
            <a href="http://www.sucaihuo.com/">Products</a>
            <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner"> 
                    <div>
                        <h4>Learning & Games</h4>
                        <ul>
                            <li><a href="http://www.sucaihuo.com/">Catch the Bullet</a></li>
                            <li><a href="http://www.sucaihuo.com/">Snoopydoo</a></li>
                            <li><a href="http://www.sucaihuo.com/">Fallen Angel</a></li>
                            <li><a href="http://www.sucaihuo.com/">Sui Maker</a></li>
                            <li><a href="http://www.sucaihuo.com/">Wave Master</a></li>
                            <li><a href="http://www.sucaihuo.com/">Golf Pro</a></li>
                        </ul>
                    </div>
                    <div>
                        <h4>Utilities</h4>
                        <ul>
                            <li><a href="http://www.sucaihuo.com/">Gadget Finder</a></li>
                            <li><a href="http://www.sucaihuo.com/">Green Tree Express</a></li>
                            <li><a href="http://www.sucaihuo.com/">Green Tree Pro</a></li>
                            <li><a href="http://www.sucaihuo.com/">Wobbler 3.0</a></li>
                            <li><a href="http://www.sucaihuo.com/">Coolkid</a></li>
                        </ul>
                    </div>
                </div><!-- /cbp-hrsub-inner -->
            </div><!-- /cbp-hrsub -->
        </li>
    </ul>
</nav>

调用水平下拉菜单插件

<script src="js/cbpHorizontalMenu.min.js"></script>
<script>
    $(function() {
        cbpHorizontalMenu.init();
    });
</script>