Bootstrap多级导航栏(级联导航)的实现代码

<script src="~/Content/bootstraps/JS/bootstrap-submenu.js"></script><script src="~/Content/bootstraps/JS/highlight.min.js"></script><script src="~/Content/bootstraps/JS/docs.js"></script><link href="~/Content/bootstraps/CSS/bootstrap-submenu.css" rel="stylesheet" /> 

<ul class="nav nav-pills">@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> 

<div class="navbar navbar-fixed-top"><div class="navbar-inner"><div class="container-fluid"><a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><a href="#" class="brand">Project name</a><div class="nav-collapse"><ul class="nav"><li class="active"><a href="#">Home</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<b class="caret"></b></a><ul class="dropdown-menu"><li class="dropdown-submenu"><a href="#">More options</a><ul class="dropdown-menu"><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li><li class="dropdown-submenu"><a href="#">Second level link</a><ul class="dropdown-menu"><li><a href="#">3333333333</a></li></ul></li></ul></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li class="nav-header">Nav header</li><li><a href="#">Separated link</a></li><li><a href="#">One more separated link</a></li></ul></li></ul><form action="" class="navbar-search pull-left"><input type="text" placeholder="Search" class="search-query span2"></form><ul class="nav pull-right"><li><a href="#">Link</a></li><li class="divider-vertical"></li><li class="dropdown"><a class="#" href="#">Menu</a></li></ul></div><!-- /.nav-collapse --></div></div></div><hr /><ul class="nav nav-pills"><li class="active"><a href="#">Regular link</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown<b class="caret"></b></a><ul class="dropdown-menu" id="menu1"><li class="dropdown-submenu"><a href="#">More options</a><ul class="dropdown-menu"><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li></ul></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li><a href="#">Separated link</a></li></ul></li><li class="dropdown"><a href="#">Menu</a></li><li class="dropdown"><a href="#">Menu</a></li></ul>