Tab Menu

Hi
try this example :-

<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.

Check

http://blogs.ipona.com/davids/archive/2008/08/19/tab-style-menus.aspx

Good Luck