Bind (Populate) Horizontal Menu control from SiteMap in ASP.Net

i am using site.map

here is my navigation bar is Horizontal, but when i populating data on page then my navigation bar get vertical which should not be

after complete poplulated data then navigation bar get Horizontal

below is my sitemap code

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="" title="Small Bale"  description="Small Bale" >
    <siteMapNode url="" title="Small Bale"  description="Small Bale" >
    <siteMapNode url="InputSB.aspx" title="Entry Form"  description="Jobs Pag" />
      <siteMapNode url="RepackSB.aspx" title="Repack"  description="Repack" />
      <siteMapNode url="SBTransfer.aspx" title="Transfer"  description="Transfer" />
      <siteMapNode url="SBSOUD.aspx" title="Order"  description="SaleOrder" />
    </siteMapNode>    
    <siteMapNode url="" title="Big Bale"  description="Small Bale" >
      <siteMapNode url="InputBB.aspx" title="Entry Form"  description="Jobs Page" />
      <siteMapNode url="" title="Delete"  description="Delete" />
      <siteMapNode url="" title="Transfer"  description="Transfer" />
    </siteMapNode>
    <siteMapNode url="." title="Report"  description="Careers Page" >
      <siteMapNode url="AllSbale.aspx" title="Daily Report"  description="Upload Page" />
      <siteMapNode url="RE.aspx" title="Smal Bale"  description="Jobs Page" />
      <siteMapNode url="r.aspx" title="Upload"  description="Upload Page" />
    </siteMapNode>
  </siteMapNode>
</siteMap>

    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
    <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal">
        <LevelMenuItemStyles>
            <asp:MenuItemStyle CssClass="child_menu" /> 
        </LevelMenuItemStyles>
        <DynamicMenuItemStyle CssClass="sub_menu" />
        <DynamicHoverStyle CssClass="hover_menu" />
        <StaticSelectedStyle CssClass="selected_menu" />
        <StaticHoverStyle CssClass="hover_menu" />         
        <LevelSelectedStyles>
            <asp:MenuItemStyle CssClass="child_menu" />
        </LevelSelectedStyles>
        <DynamicMenuItemStyle CssClass="sub_menu" />
        <DynamicHoverStyle CssClass="hover_menu" />
        <StaticSelectedStyle CssClass="selected_menu" />
        <StaticHoverStyle CssClass="hover_menu" />
        <LevelSelectedStyles>
            <asp:MenuItemStyle CssClass="child_menu" />
        </LevelSelectedStyles>
        <DynamicMenuItemStyle CssClass="sub_menu" />
        <DynamicHoverStyle CssClass="hover_menu" />
        <StaticSelectedStyle CssClass="selected_menu" />
        <StaticHoverStyle CssClass="hover_menu" />         
    </asp:Menu>
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>

<style type="text/css">
    .parent_menu
    {
        width: 110px;
        background-color: #8AE0F2;
        color: #000;
        text-align: center;
        height: 30px;
        margin-right: 5px;
    }
    .child_menu
    {
        width: 110px;
        background-color: #000;
        color: #fff;
        text-align: center;
        height: 30px;
        line-height: 30px;
        
    }
    .sub_menu
    {
        width: 110px;
        background-color: #000;
        color: #fff;
        text-align: center;
        height: 30px;
        line-height: 30px;
        margin-top: 5px;
    }
    .selected_menu
    {
        background-color: #FF6600;
    }
    .hover_menu
    {
        background-color: #990000;
        color:#fff;
    }
</style>