Exemplo de menu com jQuery UI

Exemplo de código de menu para usarmos com jQuery UI:


<ul class="nav navbar-nav" id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
<li>@Html.ActionLink("Clientes", "Index", "Clientes")</li>
<li id="subProdutosMenu" style="color:gray;margin-top:15px;">
Produtos
<ul style="background-color:black">
<li>@Html.ActionLink("Produtos", "Index", "Produtos")</li>
<li>@Html.ActionLink("Familias de Produtos", "Index", "ProdutoFamilia")</li>
<li>@Html.ActionLink("Regras de Precificação", "Index", "ProdutoPrecificacao")</li>
</ul>
</li>
<li>@Html.ActionLink("Pedidos", "Index", "Pedidos")</li>
</ul>


O código javascript para manipular este menu fica assim:

<script type="text/javascript">
(function ($) {
$("#menu").menu();
})(jQuery);
</script>