在bootstrap官方来说，导航最多就是两级，两级以上是无法实现的，大叔找了一些第三方的资料，终于找到一个不错的插件，使用上和效果上都还不错，现在和大家分享一下

插件地址：http://vsn4ik.github.io/bootstrap-submenu/

先看一下，在大叔后台系统上的显示效果

下面说一下实现的方式

１　引用三个JS插件和一个CSS类库

    @foreach (var item in Model)
    {
        if (item.Sons != null && item.Sons.Count > 0)
        {
               
        <li class=\"dropdown\">
            <a data-submenu=\"\" data-toggle=\"dropdown\" tabindex=\"0\">@item.MenuName<span class=\"caret\"></span></a>
            <ul class=\"dropdown-menu\">
                @foreach (var sub in item.Sons)
                {
                    if (sub.Sons != null && item.Sons.Count > 0)
                    {

                    <li class=\"dropdown-submenu\">
                        <a tabindex=\"0\">@sub.MenuName</a>
                        <ul class=\"dropdown-menu\">
                            @foreach (var inner in sub.Sons)
                            {
                                <li>
                                    <a href=\"@inner.LinkUrl\">@inner.MenuName</a>
                                </li>
                            }

                        </ul>
                    </li>
                    <li class=\"divider\"></li>

                    }

                    else
                    {
                    <li><a href=\"@sub.LinkUrl\">@sub.MenuName</a></li>
                    }
                }
            </ul>
        </li>
        }
        else
        {
        <li><a href=\"@item.LinkUrl\">@item.MenuName</a></li>
        }
    }
</ul>