title: Dynamic menu with ASP.NET MVC 4 and jQuery
body: <p>I'm working on an ASP.NET MVC 4 module which should display multilevel menu in my view based on data taken from database. Since I have no clear idea how to complete the entire task I decided to do it step by step in a way I think I think I will end up with the final result I want.</p>
  
  <p>I've done some googling and now I have this :</p>
  
  <p>class <code>MenuItem</code> :</p>
  
  <pre><code>public class MenuItem
  {
    public MenuItem()
    {
      this.ChildMenuItems = new List&lt;MenuItem&gt;();
    }
  
    public int MenuItemId { get; set; }
    public string MenuItemName { get; set; }
    public string MenuItemPath { get; set; }
    public Nullable&lt;int&gt; ParentItemId { get; set; }
    public virtual ICollection&lt;MenuItem&gt; ChildMenuItems { get; set; }
  }
  </code></pre>
  
  <p>and class <code>Menu</code> :</p>
  
  <pre><code>public class Menu
  {
    public Menu()
    {
      Items = new List&lt;MenuItem&gt;();
    } 
    public List&lt;MenuItem&gt; Items;
  }
  </code></pre>
  
  <p>I think to use <code>Entity Framework 5</code> and <code>Code First</code> workflow so those classes may be usefull for the future but now it's all dummy data that I create in my controller - using the <code>HomeController</code> from the default MVC 4 project created from <code>Visual Studio 2012</code> for simplicity. And then render the data in a partial view <code>_Menu</code> :</p>
  
  <pre><code>@model DynamicMenu.Models.Menu
  &lt;ul id="menu"&gt;
      @foreach (var item in Model.Items)
      {
          &lt;li&gt;&lt;a href="@item.MenuItemPath"&gt;@item.MenuItemName&lt;/a&gt;
              @if (item.ChildMenuItems.Any())
              {
                  &lt;ul&gt;
                      @foreach (var subitem in item.ChildMenuItems)
                      {
                          &lt;li&gt;&lt;a href="@subitem.MenuItemPath"&gt;@subitem.MenuItemName&lt;/a&gt;&lt;/li&gt;
                      }
                  &lt;/ul&gt;
              }
          &lt;/li&gt;
      }
  &lt;/ul&gt;
  </code></pre>
  
  <p>Also in my <code>_Layout</code> view I have :</p>
  
  <pre><code> @Styles.Render("~/Content/css")
   //Next two rows are added
   &lt;link href="../../Content/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" /&gt;
   &lt;link href="../../Content/themes/base/jquery.ui.menu.css" rel="stylesheet" type="text/css" /&gt;
   @Scripts.Render("~/bundles/modernizr")
   //some more default code...
   &lt;script&gt;
     $(document).ready(function () {
       $("#menu").menu();
   });
   &lt;/script&gt;
  </code></pre>
  
  <p>This example is using <code>jQuery Menu widget</code> and seems like it can offer what I need but the problem I want to resolve now is that with the code like this I get the following output :</p>
  
  <p><img src="https://i.stack.imgur.com/PV5Lb.png" alt="Menu"></p>
  
  <p>And what I want is to show/hide submenus on mouse hover. With pure <code>HTML</code> and <code>JavaScript/jQuery</code> i think it would be easier(not sure about that though) but I want(if possible) to stick to the <code>Razor</code> view engine.</p>
  
  <p>So my questions are :</p>
  
  <ul>
  <li>Given the code how can I show hide the submenus on mouse hover?</li>
  <li>Many sites have such kind of menus so I think that maybe there's a standard way to implement such a functionality. Even though my search led only to some partial solutions could someone point me to a site/tutorial where implementing such a functionality is shown/explained?</li>
  </ul>