Something like this any good?

 @foreach (var item in selection)
            {
                if (item.Children().Count() == 0) {
                    <a href="@item.Url" class="navlink w-nav-link">@item.Name</a>
                }
                else if (item.Children().Count() >= 1) {
                    <div data-hover="1" data-delay="0" class="w-dropdown">
                    <div class="navlink w-dropdown-toggle">
                        <div>@item.Name</div>
                    </div>
                        @foreach (var child in item.Children().Where(c => c.IsVisible())) { 
                            <nav class="w-dropdown-list">
                                <a href="@child.Url" class="navlink w-dropdown-link">@child.Name</a>
                            </nav>
                        }
                    </div>
                }
            }

Maybe it would be more efficient to do

If children {
      // children
}
else {
      //no children link
}

Thanks thats great and worked a treat!

My only issue is it only shows 1 node in the drop down lists at a time? if I create more then 1 child under a node it will only show the latest 1?

Thanks

Thanks my code is below

@inherits Umbraco.Web.Mvc.UmbracoViewPage

@{
    var selection = Umbraco.ContentAtRoot().FirstOrDefault()
    .Children()
    .Where(x => x.IsVisible());
}

<div data-collapse="medium" data-animation="default" data-duration="400" class="navbar w-nav">
<div class="w-container">
<nav role="navigation" class="navmenu w-nav-menu">
    <a href="/" class="navlink w-nav-link">Home</a>
@foreach (var item in selection)
{
    var children = item.Children(c => c.IsVisible()).ToArray();
    if (children.Any())
    {
        <div data-hover="1" data-delay="0" class="w-dropdown">
            <div class="navlink w-dropdown-toggle">
                <div>@item.Name</div>
            </div>
            @foreach (var child in children)
            {
                <nav class="w-dropdown-list">
                    <a href="@child.Url" class="navlink w-dropdown-link">@child.Name</a>
                </nav>
            }
        </div>
    }
    else
    {
        <a href="@item.Url" class="navlink w-nav-link">@item.Name</a>
    }
}
     </nav>
        <div class="handburger w-nav-button">
          <div class="w-icon-nav-menu"></div>
        </div>
 </div>
</div> 

Yeap thats correct, if I create a new child under node "what we do" it would then hide the previous child created.

I did think of the NaviHide, checked those and even tried removing the IsVisible statement but still the same issue.

Hmm I'll try check the CSS/JS but cant see it being an issue as works out of Umbraco, strange.

Got it working, I had to take the following class outside of my loop;

    <nav class="w-dropdown-list">

</nav>

Thanks :)

Hi !! This solution worked for me

In master.cshtml

@{
var rootNodes = Umbraco.TypedContentAtRoot().ToList();
Layout = null;
}

Inside nav tag

    <ul>
        @foreach (var node in rootNodes)
        {
        <div class="dropdown">                   
            <a class="dropbtn" style="padding-right:20px;color:white" href="@node.Url">@node.Name</a>

            <div class="dropdown-content">

                @foreach (var c in node.Children)
                {
                    <a href="@c.Url" class="nav-link w-nav-link">@c.Name</a>
                }
            </div>
        </div>
        }
    </ul>

In Master.css

.dropdown-content a:hover {
background-color: #ddd;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: maroon;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
 color: black;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
}

is working on a reply...