layui左侧三级菜单2.0

之前在layui 1.0的时候写过一个三级菜单，那时候用三级菜单还要自己扩展，与后台交互也显得麻烦，现在新版本的layui自动就可以实现三级菜单了，很多朋友在问，我就帮大家整理了一下样式大家可以改改，直接上代码：

<link rel="stylesheet" type="text/css" href="css/layui.css" />
<script src="layui.all.js"></script>

<ul class="layui-nav layui-nav-tree" >
    <li data-name="home" class="layui-nav-item">
        <a href="javascript:;" lay-tips="主页" lay-direction="2">
            <i class="layui-icon layui-icon-home"></i>
            <cite>主页</cite>
            <span class="layui-nav-more"></span></a>
        <dl class="layui-nav-child">
            <dd data-name="console" class="layui-this">
                <a lay-href="home/console.html">控制台</a>
            </dd>
        </dl>
    </li>
    <li data-name="component" class="layui-nav-item layui-nav-itemed">
        <a href="javascript:;" lay-tips="组件" lay-direction="2">
            <i class="layui-icon layui-icon-component"></i>
            <cite>组件</cite>
            <span class="layui-nav-more"></span></a>
        <dl class="layui-nav-child">
            <dd data-name="grid">
                <a href="javascript:;">栅格<span class="layui-nav-more"></span></a>
                <dl class="layui-nav-child">
                    <dd data-name="list">
                        <a lay-href="component/grid/list.html">等比例列表排列</a>
                    </dd>
                    <dd data-name="mobile">
                        <a lay-href="component/grid/mobile.html">按移动端排列</a>
                    </dd>
                </dl>
            </dd>
            <dd data-name="button">
                <a lay-href="component/button/index.html">按钮</a>
            </dd>
        </dl>
    </li>
</ul>

这里提醒一下，要加载layui.all.js，加载layui.js菜单收缩功能无效。
只要按这种写法，应该是可以实现无限级菜单的。与后台交互的时候用地柜算法就可以全部遍历出来，这里没有写实例，如果遇到问题的可以留言交流，谢谢。