I needed to create a quick horizontal tabbed menu with the Menu control.  The tabs have rounded corners so we're using image backgrounds.  We also have different images for the selected tab and when you hover.

<asp:Menu runat="server" ID="Menu1" SkinID="MenuHorizontalTabs">
    <Items>
        <asp:MenuItem Text="Tab 1" Value="Tab1" Selected="true" />
        <asp:MenuItem Text="Tab 2" Value="Tab2" />
        <asp:MenuItem Text="Tab 3" Value="Tab3" />
        <asp:MenuItem Text="Tab 4" Value="Tab4" />
    </Items>
</asp:Menu>

Then I added MenuHorizontalTabs to my skins file. 

<asp:Menu runat="server" SkinID="MenuHorizontalTabs" Orientation="Horizontal">
    <StaticItemTemplate>
        <div>
            <span>
                <asp:Literal runat="server" ID="Literal1" Text='<%# Eval("Text") %>' />
            </span>
        </div>
    </StaticItemTemplate>
    <StaticSelectedStyle CssClass="MenuHorizontalTabsSelectedMenuItem" />
    <StaticHoverStyle CssClass="MenuHorizontalTabsHoverMenuItem" />
    <StaticMenuItemStyle CssClass="MenuHorizontalTabsMenuItem" />
</asp:Menu>

Now, let's look at the CSS file.

.MenuHorizontalTabsMenuItem * div
{
    background:url(/images/header/left_both.gif) no-repeat left top; 
    height: 22px; 
    padding-left: 9px; 
    cursor: pointer;
}
.MenuHorizontalTabsMenuItem * span
{
    background:url(/images/header/right_both.gif) no-repeat right top; 
    padding: 5px 15px 4px 6px; 
    font-size: 10px; 
    color: #333; 
    height: 22px;
}
.MenuHorizontalTabsSelectedMenuItem * div
{
    background-position: 0px -150px;
}
.MenuHorizontalTabsSelectedMenuItem * span
{
    background-position: 0px -150px;
}
.MenuHorizontalTabsHoverMenuItem * div
{
    background-position: 0px -150px;
    color: Blue;
    text-decoration: none;
}
.MenuHorizontalTabsHoverMenuItem * span
{
    background-position: 0px -150px;
    color: Blue;
    text-decoration: none;
}

And finally, let's see the images.

left_both.gif

right_both.gif