How to realize this result: Dropdown list in the Top Navigation bar?

Dropdown list in the Top Navigation bar_Dropdown list 

 

Resolution Steps:
 
1.       Use SharePoint Designer edit the site collection:
 
 

Dropdown list in the Top Navigation bar_Dropdown list_02

 
2. find below code:
 
<SharePoint:AspMenu
   ID="TopNavigationMenuV4"
   Runat="server"
   EnableViewState="false"
   DataSourceID="topSiteMap"
   AccessKey="<%$Resources:wss,navigation_accesskey%>"
   UseSimpleRendering="true"
   UseSeparateCss="false"
   Orientation="Horizontal"
   StaticDisplayLevels="2"
   MaximumDynamicDisplayLevels="1"
   SkipLinkText=""
   Css/>
Change from MaximumDynamicDisplayLevels="1" to MaximumDynamicDisplayLevels="4".
 
3.
Change from
ShowStartingNode="False" to ShowStartingNode="True"
SiteMapProvider="SPNavigationProvider" to SiteMapProvider="SPSiteMapProvider"
Delete: StartingNodeUrl="sid:1002"
 
From

<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
 <Template_Controls>
   <asp:SiteMapDataSource
    ShowStartingNode="False"
    SiteMapProvider="SPNavigationProvider"
     id="topSiteMap"
     runat="server"
     StartingNodeUrl="sid:1002"/>
  </Template_Controls>
</SharePoint:DelegateControl>
 

 
To

<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
 <Template_Controls>
   <asp:SiteMapDataSource
    ShowStartingNode="True"
     SiteMapProvider="SPSiteMapProvider"
     id="topSiteMap"
     runat="server"/>
  </Template_Controls>
</SharePoint:DelegateControl>
 

 
4. Save and refresh.