Build a Menu from the web.sitemap file in ASP.NET
<p>I have started a new ASP.NET 4 WebForm application. By default, the Site.Master file  contains the following menu:</p>

<pre><code>&lt;asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"   IncludeStyleBlock="false" Orientation="Horizontal"&gt;
  &lt;Items&gt;
    &lt;asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/&gt;
    &lt;asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/&gt;
  &lt;/Items&gt;
&lt;/asp:Menu&gt;
</code></pre>

<p>This menu contains two blocks: "Home" and "About". I like this structure. However, I want to populate the <code>NavigationMenu</code> based upon the contents of my Web.sitemap file. At this time, this file looks like this:</p>

<pre><code>&lt;?xml version="1.0" encoding="utf-8" ?&gt;
&lt;siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" &gt;
  &lt;siteMapNode&gt;
    &lt;siteMapNode url="/Default.aspx" title="Home"  description=""&gt;&lt;/siteMapNode&gt;
    &lt;siteMapNode url="/Products/List.aspx" title="Products" description=""&gt;&lt;/siteMapNode&gt;
  &lt;/siteMapNode&gt;
&lt;/siteMap&gt;
</code></pre>

<p>I changed the <code>NavigationMenu</code> code to look like the following:</p>

<pre><code>&lt;asp:SiteMapDataSource ID="mySiteMapDataSource" runat="server" /&gt;
&lt;asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" DataSourceID="mySiteMapDataSource" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" /&gt;
</code></pre>

<p>My problem is, this approach creates a small block that represents the menu. When the user hovers over this, two sub-menu items appear "Home" and "Products". Oddly, the web.sitemap file only alows for one <code>siteMapNode</code> as the child of the <code>siteMap</code> element. How do I make it such that "Home" and "Products" appear in the same way that "Home" and "About" did, while giving me the flexibility of using the sitemap?</p>

<p>Thank you!</p>
