Multi Level Drop down Menu using Razor in Umbraco - razor

Question

I am trying to build a multi-level dropdrown menu, I'm using umbraco cms.
What I am looking for is something like :
<div id="TopMenu">
<ul class="myMenu">
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>Products1</li>
<li>Products2</li>
<li>Products3</li>
</ul>
</li>
<li>ContactUs</li>
</ul>
</div><!--TopMenu-->
And in Umbraco I have created cshtml for it to work :
<ul class="myMenu">
<li>Home </li>
#foreach (var page in #Model.AncestorOrSelf(1).Children)
{
string style = "";
if (1 == 1) { style = "class=\"current\""; }
<li><a href="#page.Url" #style>#page.Name</a></li>
}
The Above razor syntax works fine for AncestorOrSelf(1) which is Top level , but i need sub nodes for products which is AncestorOrSelf(2), Does any one knows how to acheive this
Thanx

Answer 1

This is the razor code I'm currently using in my project:
#foreach (var page in Model.AncestorOrSelf(1).Children.Where("Visible"))
{
<li>#page.Name
if (page.Children.Where("Visible").Count() > 0)
{
<ul>
#foreach (var subpage in page.Children.Where("Visible"))
{
<li>#subpage.Name</li>
}
</ul>
}
</li>
}
The inner loop cycles through all the children of the outer loop's node.