之前为大家分享了很多导航菜单。今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单，菜单是垂直的，每一个菜单项带有一个小图标，看起来非常专业。并且菜单支持无限极下拉，所以对各位Web开发者来说非常实用。菜单时基于jQuery的，所以基本可以支持所有的浏览器。

在线预览   源码下载

实现的代码。

html代码：

 <div class="content">
            <ul class="vertical-nav dark red">
                <li class="active"><a href="http://www.w2bc.com/"><i class="icon-home"></i>首页</a></li>
                <li><a href="http://www.w2bc.com/"><i class="icon-cogs"></i>服务 <span class="submenu-icon">
                </span></a>
                    <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><a href="http://www.w2bc.com/">二级导航</a></li>
                        <li><a href="http://www.w2bc.com/">二级导航</a></li>
                    </ul>
                </li>
                <li><a href="http://www.w2bc.com/"><i class="icon-briefcase"></i>产品 <span class="submenu-icon">
                </span></a>
                    <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/">二级导航<span class="submenu-icon"></span></a><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/">三级导航 <span class="submenu-icon"></span></a>
                                <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>
                                </ul>
                            </li>
                            <li><a href="http://www.w2bc.com/">三级导航</a></li>
                        </ul>
                        </li>
                        <li><a href="http://www.w2bc.com/">二级导航</a></li>
                        <li><a href="http://www.w2bc.com/">二级导航</a></li>
                    </ul>
                </li>
                <li><a href="http://www.w2bc.com/"><i class="icon-user"></i>关于我们</a></li>
                <li><a href="http://www.w2bc.com/"><i class="icon-comments-alt"></i>博客</a></li>
                <li><a href="http://www.w2bc.com/"><i class="icon-picture"></i>导航</a></li>
                <li><a href="http://www.w2bc.com/"><i class="icon-info"></i>信息</a></li>
                <li><a href="http://www.w2bc.com/"><i class="icon-group"></i>团队</a></li>
                <li><a href="http://www.w2bc.com/"><i class="icon-question"></i>常见问题</a></li>
                <li><a href="http://www.w2bc.com/"><i class="icon-bar-chart"></i>案例</a></li>
                <li><a href="http://www.w2bc.com/"><i class="icon-envelope"></i>联系我们</a></li>
            </ul>
        </div>

via:http://www.w2bc.com/Article/16719

在线预览    源码下载