Customize Top Navigation Bar - Horizontal Orientation for second level

Add Css in core4.css

.s4-toplinks {

    padding-bottom: 20px; /* create space to fit the 2nd level nav */

    position: relative;

}

 

.s4-toplinks .s4-tn li {

    position: static !important; /* 2nd level will be positioned relative to .s4-toplinks container */

float:left;

}

 

Add this in Master page 

<SharePoint:AspMenu

 ID="TopNavigationMenuV4"

 Runat="server"

 EnableViewState="false"

 DataSourceID="topSiteMap"

 AccessKey="<%$Resources:wss,navigation_accesskey%>"

 UseSimpleRendering="true"

 UseSeparateCss="false"

 Orientation="Horizontal"

 StaticDisplayLevels="2"

 MaximumDynamicDisplayLevels="4"

 SkipLinkText=""

 CssClass="s4-tn"/>

<Template_Controls>

<asp:SiteMapDataSource

 ShowStartingNode="true"(change here)

 SiteMapProvider="SPSiteMapProvider"(change here)

 id="topSiteMap"

 runat="server"

 />