Dropdown menu Umbraco - html

Question

I made a menu for umbraco but I can't get the dropdown to work! Below is my code:
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
<div class="NavDigiCampuz">
<div>
<div class="nav nav-list tree">
#{
var documentRootNodeId = Model.Content.GetPropertyValue("documentRoot", true); // Fetch recursive document root id.
var selection = Umbraco.TypedContent(documentRootNodeId).Children.Where("Visible"); // Select all nodes below the document root.
}
#foreach(var item in Model.Content.Ancestor(1).Descendants("menu")){
foreach (var Menus in #item.Descendants("menuItem")){
<li class="MenuItems">#Menus.Name</li>
foreach (var MenuItems in #Menus.Children){
if(MenuItems.GetPropertyValue("hoofdstukIcoon") != "") {
<li><a class="NormalA" href="#MenuItems.Url"><i class="fa fa-#(MenuItems.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i> #MenuItems.Name</a></li>
}else {
<li><a class="NormalA"href="#MenuItems.Url">#MenuItems.Name</a></li>
var childIsActive = false;
foreach(var sub in #MenuItems.Children){
if (CurrentPage.Url == sub.Url) {
childIsActive = true;
}
<ul class="nav subnav nav-list tree #(childIsActive ? "" : "collapse")">
#foreach(var sub2 in #MenuItems.Children){
<li #(CurrentPage.Url == sub.Url ? "class=active" : "")>
<a onclick="parent.resizeParent();" href="#sub.Url">#(sub.GetPropertyValue("hoofdstukMenuTitel") != "" ? sub.GetPropertyValue("hoofdstukMenuTitel") : sub.GetPropertyValue("hoofdstukTitel"))</a>
</li>
}
</ul>
}
}
}
}
}
</ul>
</div>
</div>
</div>
The dropdown code should start at <ul class="nav subnav nav-list tree #(childIsActive ? "" : "collapse")"> but that doesn't seem to work.
Below is a quick structure of how I want my page to be:
Help item 3 should have a dropdown which it doesn't have right now. What am I missing?

Answer 1

You have some inconsistencies in your structure:
this line:
<div class="nav nav-list tree">
should be this:
<ul class="nav nav-list tree">
And I would remove the <div> that wrapps it.
I'm just guessing you are using something like bootstrap, are you using a framework or custom css?
Your submenu should also be nested in the <li> element:
else
{
<li><a class="NormalA" href="#MenuItems.Url">#MenuItems.Name</a>
var childIsActive = false;
foreach (var sub in #MenuItems.Children)
{
if (CurrentPage.Url == sub.Url)
{
childIsActive = true;
}
<ul class="nav subnav nav-list tree #(childIsActive ? "" : "collapse")">
#foreach (var sub2 in #MenuItems.Children)
{
<li #(CurrentPage.Url == sub.Url ? "class=active" : "")>
<a onclick="parent.resizeParent();" href="#sub.Url">#(sub.GetPropertyValue("hoofdstukMenuTitel") != "" ? sub.GetPropertyValue("hoofdstukMenuTitel") : sub.GetPropertyValue("hoofdstukTitel"))</a>
</li>
}
</ul>
}
</li>
}