Help

I have a problem with my multi-level menu in Umbraco 7.3 - it works for level 1& 2 and I found a solution for level 3 but don't know how to reference/call the level 3 pages.

here is my code:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage


    @*
    Macro to display child pages below the root page of a standard website.
    Also highlights the current active page/section in the navigation with
    the css class "current".
*@

@{

     var root = CurrentPage.AncestorOrSelf(1); 

}

 <div id="navigation" class="navbar navbar" role="navigation">
   <div class="container">

<ul class="nav navbar-nav">

@foreach (var page in Model.Content.AncestorOrSelf(1).Children.Where("Visible"))
{
   <li>
       @{
           if (page.Children.Where("Visible").Count() > 0)
           {
            <li class="dropdown">
                <a class="dropdown-toggle"href="@page.Url">@page.Name</a>
            <ul class="dropdown-menu" role="menu">

                 @foreach (var subpage in page.Children.Where("Visible"))

                 {
                    <li>        
                        <a href="@subpage.Url">@subpage.Name</a></li>
                        foreach (var childPage in subpage.Children.Where("Visible"))
        {
      <ul>
          <li>
         <a href="@subpage.Url">@subpage.Name</a>
          </li>
    </ul>     
        }
                 }


              </ul>
            </li>
           }else
           {
               <a href="@page.Url">@page.Name</a>
           }
       }
   </li>


}
</ul>



            </div>

                  </div><!--navigation-->

At the moment it lists the last subpage 4 times as level 3. What do I call the subpage of a subpage? or do I have to do it another way. Any help appreciated I'm pulling my hair out.

Thanks Natasha