how to create a horizontal menu from web.sitemap in asp.net

i was trying to create horizontal site menu from web.site map.But unfortunately it is showing like first one root node, then three parent node then each child node correspondingly.But i want in the following structure like, first four main menu horizontally like Home > Services > Products > Company then child menus of these parent menus should show below of each individuals like if i hover cursor over Services it should show child menus Web Designs >Website Development etc. or for Products it should show HTML Metatag Extractor ,Apartment Management System etc.How can i do that.With the existing work it is showing like first single root node Home,if you mouse hover it is showing Services , Products , Company then each child node correspondigly

Following is the work which i have done web.sitemap is

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="index.aspx" title="Home"  description="Home">
    <siteMapNode url="Services.aspx" title="Services"  description="">
      <siteMapNode url="webdesign.aspx" title="Web Designs"  description="" />
      <siteMapNode url="websitedevelopment.aspx" title="Website Development"  description=""/>
      <siteMapNode url="cmscustomization.aspx" title="CMS Customization"  description="" />
      <siteMapNode url="softwaredevelopment.aspx" title="Software Development"  description="" />
      <siteMapNode url="internetmarketing.aspx" title="Internet Marketing"  description="" />
      <siteMapNode url="mobiledevelopment.aspx" title="Mobile Development"  description="" />
      <siteMapNode url="hostingsolutions.aspx" title="Hosting Solutions"  description="" />
    </siteMapNode>
    <siteMapNode url="products.aspx" title="Products"  description="" >
      <siteMapNode url="tagxtor.aspx" title="HTML Metatag Extractor"  description="" />
      <siteMapNode url="ams.aspx" title="Apartment Management System"  description="" />
      <siteMapNode url="cgnp.aspx" title="Closed Group Network Portal"  description="" />
      <siteMapNode url="ribbon.aspx" title="Retail Management System"  description="" />
    </siteMapNode>
    <siteMapNode url="company.aspx" title="Company"  description="" >
      <siteMapNode url="aboutus.aspx" title="About Us"  description="" />
      <siteMapNode url="team.aspx" title="Our Team"  description="" />
      <siteMapNode url="career.aspx" title="Work With Us"  description="" />
      <siteMapNode url="contactus.aspx" title="Contact Us"  description="" />
    </siteMapNode>
  </siteMapNode>
</siteMap>

HTML code

 <asp:Menu ID="Menu1" runat="server" StaticEnableDefaultPopOutImage="false" Orientation="Horizontal" DataSourceID="SiteMapDataSource1">

 <asp:SiteMapPath ID="SiteMapPath1"   runat="server" PathSeparator=">"></asp:SiteMapPath>

<asp:SiteMapDataSource ID="SiteMapDataSource1"  runat="server" />

Solution

The way you currently have it set up, Home is the top node and Services, Products, and Company are below it.

You'll want to do something like this:

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
   <siteMapNode url="" title="Top Level"  description="Top Level">
       <siteMapNode url="Home.aspx" title="Home"  description="" />
       <siteMapNode url="Services.aspx" title="Services"  description="" />
       <siteMapNode url="Products.aspx" title="Products"  description="" />
       <siteMapNode url="Company.aspx" title="Company"  description="" />
   </siteMapNode>
</siteMap>

In your SiteMapDataSource you'll want to add some new properties

<asp:SiteMapDataSource ID="SiteMapDataSource1"  runat="server" StartingNodeOffset="0" ShowStartingNode="false" />

This change to the SiteMapDataSource will ignore the Top Level Node and show the 4 nodes underneath it.