A question that pops up occasionally in the ASP.NET forums is how can you get tab-style menus, such as used on MSDN, with the standard Menu control in ASP.NET. It’s actually quite simple and involves the use of two menus:

 
<div id="topNav">
    <asp:SiteMapDataSource ID="topMenuData" runat="server" ShowStartingNode="false" />
    <asp:Menu ID="topMenu" runat="server" DataSourceID="topMenuData"
        MaximumDynamicDisplayLevels="0" Orientation="Horizontal">
        <StaticMenuItemStyle CssClass="staticMenuItemStyle" />
        <StaticSelectedStyle CssClass="staticSelectedStyle" />
        <StaticHoverStyle CssClass="staticHoverStyle" />
    </asp:Menu>
</div>

The first just displays the top line; notice that it has MaximumDynamicDisplayLevels set to 0, meaning that only a single level of static items is show. ShowStatingNode is set to false so that the single root node doesn’t show either.

The sub-menu is another Menu control:

<div id="subNav">
    <asp:SiteMapDataSource ID="subMenuData" runat="server"
        ShowStartingNode="false" StartFromCurrentNode="true" />    
    <asp:Menu ID="subMenu" runat="server" DataSourceID="subMenuData"
        Orientation="Horizontal">
        <StaticMenuItemStyle CssClass="substaticMenuItemStyle" />
        <StaticHoverStyle CssClass="substaticHoverStyle" />
    </asp:Menu>
</div>

This uses a separate SiteMapDataSource, but with the default configuration this comes from the same site map file as the first SiteMapDataSource. The key properties are StartfromCurrentNode, which is set to true to make this second menu start from the current page; ShowStartingNode is set to false so that the current node isn’t show, resulting in the child nodes being shown. So you select an item from the top menu and its children are shown in the bottom.

Now you can add some styling and you get very close to the MSDN style:

<style type="text/css">
    #topNav
    {
        width: 100%;
        background-color: #964240;
        vertical-align: bottom;
        padding: 0;
        margin: 0;
        z-index: 0;
    }
    #subNav
    {
        width: 100%;
        border-left: solid 1px #000;
        border-bottom: solid 1px #000;
        border-right: solid 1px #000;
        padding: 0;
        margin: 0;
        height: 24px;
        background-color: #eee;
    }
    .staticMenuItemStyle
    {
        width: 89px;
        background-color: #7A1312;
        border: solid 1px #000;
        color: #fff;
        text-align: center;
    }
    .staticSelectedStyle
    {
        background-color: #eee;
        color: #000;
        border-bottom: solid 1px #eee;
        z-index: 100;
    }
    .staticHoverStyle
    {
        background-color: #902423;
    }
    
    .substaticMenuItemStyle
    {
        width: 89px;
        background-color: #eee;
        text-align: center;
    }
    .substaticHoverStyle
    {
        background-color: #D0D0D0;
        border: solid 1px #A68F8F;
    }
</style>

It’s not quite the same, but close. You could get closer with background images, to give the menu items a more rounded look, as well as using the CSS Adapters to produce cleaner HTML, but like this you get a good looking tab-style menu very simply.