How to get Dropdowns in Structured Global Navigation Menu on Publishing Site

Question

I have the global navigation set at Structural Navigation - showing both subsites and pages. But the Top Navigation snippet I used from Snippet Gallery is not displaying the dropdowns at all. I am using a custom master page. I do not understand the customizations in the Snippet Gallery. How do I modify this snippet code to show the dropdowns in the HTML?

<div data-name="TopNavigationNoFlyoutWithStartNode">
<!--CS: Start Top Navigation Snippet-->
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<SharePoint:AjaxDelta ID="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation ms-dialogHidden" runat="server">-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<!--PE: End of READ-ONLY PREVIEW-->
<!--MS:<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<span style="display:none">
<table cellpadding="4" cellspacing="0" style="font:messagebox;color:buttontext;background-color:buttonface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow"><tr><td nowrap="nowrap"><span style="font-weight:bold">PortalSiteMapDataSource</span> - topSiteMap</td></tr><tr><td></td></tr></table></span>
<!--PE: End of READ-ONLY PREVIEW-->
<!--MS:<Template_Controls>-->
<!--MS:<asp:SiteMapDataSource ShowStartingNode="True" SiteMapProvider="SPNavigationProvider" ID="topSiteMap" runat="server" StartingNodeUrl="sid:1002">-->
<!--ME:</asp:SiteMapDataSource>-->
<!--ME:</Template_Controls>-->
<!--ME:</SharePoint:DelegateControl>-->
<a name="startNavigation"></a>
<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderTopNavBar" runat="server">-->
<!--MS:<SharePoint:AspMenu ID="TopNavigationMenu" runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="&#60;%$Resources:wss,navigation_accesskey%&#62;" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="2" AdjustForShowStartingNode="false" MaximumDynamicDisplayLevels="0" SkipLinkText="">-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/menu-21.css" /><div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox"><ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" title="Home" href="/Pages/default.aspx" accesskey="1"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Wichita.Gov</span></span></a><ul class="static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Council/Pages/default.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">City Council</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Government/Pages/default.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Government</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/News/Pages/default.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">News</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/VisitCityHall/Pages/default.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Visit City Hall</span></span></a></li><li class="static"><span class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Heading 1</span></span></span></li></ul></li></ul></div>
<!--PE: End of READ-ONLY PREVIEW-->
<!--ME:</SharePoint:AspMenu>-->
<!--ME:</asp:ContentPlaceHolder>-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<!--PE: End of READ-ONLY PREVIEW-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--CE: End Top Navigation Snippet-->
</div>

After trying out the solution (StaticDisplayLevels & MaximumDynamicDisplayLevels) my menu ended up like this below. Subsites are "City Council", "Government", "City Council", "News", "Visit City Hall". I was also playing with manual links - Heading 1 (which is a heading) with Link 1 and Link 2 supposed to be a dropdown of Heading 1.

These are the custom styles I am using:

.GlobalMenu {
    background-color: #3F6B90;
}

.GlobalMenu .ms-core-listMenu-item,
.GlobalMenu .ms-core-listMenu-item:link,
.GlobalMenu .ms-core-listMenu-item:visited {
    color:white;
}

/* Default nav item state */
.GlobalMenu .ms-core-listMenu-horizontalBox li.static  > .ms-core-listMenu-item {
    border-left: 1px solid #5e8aaf;
    border-right: 1px solid #265277;
    padding: 10px;
}

/* Hover state for nav items (includes selected nav item) */
.GlobalMenu .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover {
    background-color: #265277;
    color: white;
    padding: 10px;
}

.GlobalMenu .ms-core-listMenu-horizontalBox li.selected a.selected {
    background-color: #265277;
}

.GlobalMenu .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {
    margin: 0px;
}

This is what the menu looks like with the styles off.

Answer 1

You can edit the snippet setting in design manager and set two properties

StaticDisplayLevels="3"
MaximumDynamicDisplayLevels="1"

Answer 2

We were facing similar issues with the horizontal navigation snippet we added on our custom master page. After spending a while this is how we solved it.

1.) Go to site settings-> Navigation

2.) Under Structural Navigation( Screenhot) --> Here you will have to delete all the nodes under Global Navigation and add them again.

PS: Dropdown did show up in our case, hope it works in your case as well.