Add a third level to dynamically accordion menu MVC 5
<p>I used the following code to create a dynamic menu. I found it at <a href="http://www.dotnetfox.com/articles/dynamic-accordion-menu-or-vertical-menu-using-jquery-in-Asp-Net-mvc-1123.aspx" rel="nofollow">http://www.dotnetfox.com/articles/dynamic-accordion-menu-or-vertical-menu-using-jquery-in-Asp-Net-mvc-1123.aspx</a></p>

<p>My model</p>

<pre><code>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Accordion_Menu_MVC.Models
{
public class MenuModel
{
   public List&lt;MainMenu&gt; MainMenuModel { get; set; }
   public List&lt;SubMenu&gt; SubMenuModel { get; set; }
}
public class MainMenu
{
   public int ID;
   public string MainMenuItem;
   public string MainMenuURL;
}
public class SubMenu
{
   public int MainMenuID;
   public string SubMenuItem;
   public string SubMenuURL;
}
}
</code></pre>

<p>My controller</p>

<pre><code>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Accordion_Menu_MVC.Models;
namespace Accordion_Menu_MVC.Controllers
{
public class HomeController : Controller
{
   //
   // GET: /Home/
   public ActionResult Index()
   {
       MenuModel ObjMenuModel = new MenuModel();
       ObjMenuModel.MainMenuModel = new List&lt;MainMenu&gt;();
       ObjMenuModel.MainMenuModel = GetMainMenu();
       ObjMenuModel.SubMenuModel = new List&lt;SubMenu&gt;();
       ObjMenuModel.SubMenuModel = GetSubMenu();
       return View(ObjMenuModel);
   }
   public List&lt;MainMenu&gt; GetMainMenu()
   {
       List&lt;MainMenu&gt; ObjMainMenu = new List&lt;MainMenu&gt;();
       ObjMainMenu.Add(new MainMenu { ID = 1, MainMenuItem = "Mobile", MainMenuURL = "http://www.google.com" });
       ObjMainMenu.Add(new MainMenu { ID = 2, MainMenuItem = "Speaker", MainMenuURL = "#" });
       ObjMainMenu.Add(new MainMenu { ID = 3, MainMenuItem = "Watch", MainMenuURL = "#" });
       ObjMainMenu.Add(new MainMenu { ID = 4, MainMenuItem = "Clothes", MainMenuURL = "#" });
       return ObjMainMenu;
   }
   public List&lt;SubMenu&gt; GetSubMenu()
   {
       List&lt;SubMenu&gt; ObjSubMenu = new List&lt;SubMenu&gt;();
       ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "Apple", SubMenuURL = "#" });
       ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "Samsung", SubMenuURL = "#" });
       ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "Nokia", SubMenuURL = "#" });
       ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "Motorola", SubMenuURL = "#" });
       return ObjSubMenu;
      }
      }
     }
</code></pre>

<p>My view</p>

<pre><code>@model Accordion_Menu_MVC.Models.MenuModel  
@{
ViewBag.Title = "Dynamic Accordion Menu Using jQuery in ASP.NET MVC";
}
&lt;link href="Css/styles.css" rel="stylesheet" type="text/css" /&gt;
&lt;script src="http://code.jquery.com/jquery-latest.min.js"      type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function () {
   $("#accordian h3").click(function () {
       $("#accordian ul ul").slideUp();
       if (!$(this).next().is(":visible")) {
           $(this).next().slideDown();
       }
   });
});
 &lt;/script&gt;
 @using (Html.BeginForm("Index", "Home"))
   {
 &lt;div id="accordian"&gt;
     &lt;ul&gt;
              &lt;li&gt;
              @{
  foreach (var MenuItem in Model.MainMenuModel)
  {
  var SubMenuItem = Model.SubMenuModel.Where(m =&gt; m.MainMenuID ==  MenuItem.ID);

      &lt;h3&gt;&lt;a href="@MenuItem.MainMenuURL"&gt; @MenuItem.MainMenuItem &lt;/a&gt;&lt;/h3&gt;

        if (SubMenuItem.Count() &gt; 0)
        {
             &lt;ul&gt;
                      @foreach (var SubItem in SubMenuItem)
                      {
                          &lt;li&gt;&lt;a h  href='@SubItem.SubMenuURL'&gt;@SubItem.SubMenuItem&lt;/a&gt;&lt;/li&gt;
                      }
             &lt;/ul&gt;
         }

      }
   }
     &lt;/ul&gt;
  &lt;/div&gt;   
   }
</code></pre>

<p>My css</p>

<pre><code>&lt;style&gt;
 /*Basic reset*/
 * {margin: 0; padding: 0;}
 body {
     background: White;
     font-family: Nunito, arial, verdana;
 }
#accordian {
     background: #004050;
     width: 250px;
     margin: 100px auto 0 auto;
     color: white;
     /*Some cool shadow and glow effect*/
     box-shadow:
              0 5px 15px 1px rgba(0, 0, 0, 0.6),
              0 0 200px 1px rgba(255, 255, 255, 0.5);
  }
/*heading styles*/
#accordian h3 {
     font-size: 12px;
     line-height: 34px;
     padding: 0 10px;
     cursor: pointer;
     /*fallback for browsers not supporting gradients*/
     background: #003040;
     background: linear-gradient(#003040, #002535);
  }
/*heading hover effect*/
 #accordian h3:hover {
     text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
 }
  /*iconfont styles*/
  #accordian h3 a {
     color: white;
     text-decoration: none;
     font-size: 12px;
     line-height: 27px;    
     padding: 0 15px;
     /*transition for smooth hover animation*/
  }
 #accordian h3 a:hover {
 color:#E1E1E1;   
  }
/*list items*/
 #accordian li {
     list-style-type: none;
  background:#4D6974;
 }
 /*links*/
    #accordian ul ul li a {
     color: white;
     text-decoration: none;
     font-size: 11px;
     line-height: 27px;
     display: block;
     padding: 0 15px;
     /*transition for smooth hover animation*/
     transition: all 0.15s;
      }
     /*hover effect on links*/
     #accordian ul ul li a:hover {
     background: #003545;
     border-left: 5px solid lightgreen;
     }
    /*Lets hide the non active LIs by default*/
     #accordian ul ul {
     display: none;
     }
     #accordian li.active ul {
      display: block;
     }
     &lt;/style&gt;
</code></pre>

<p>Can someone help me on how can I add a third level in this menu</p>