Center Menu Text

[Shelley]

I have a simple menu using custom CSS. I am trying to center the menu text and it works for the sub menu items but not the top menu item. Please tell me what I am doing wrong:

<td colspan="5" align="center" valign="top"><table width="100%" height="51" border="0" cellpadding="0" cellspacing="5">
          <tr>
            <td width="20%" height="33" align="center" bgcolor="#002C77">
            <%--Welcome--%>
            <div id="WhiteLink3">
                        <telerik:RadMenu ID="RadMenu2" runat="server" Width="100%" Flow="Vertical" Skin="" style="font-size: 12pt; font-family: verdana; background-color:transparent; text-align:center !Important;"
                             EnableEmbeddedSkins="False">
                            <CollapseAnimation Duration="400" Type="InCubic"/>
                            <Items>
                                <telerik:RadMenuItem runat="server" Text="Welcome" BackColor="Transparent" CssClass="top_heading">
                                    <GroupSettings ExpandDirection="Down"/>
                                    <Items>
                                        <telerik:RadMenuItem runat="server" Text="About WABF" backcolor="#F2F2F2" Font-Size="8pt" Width="140px" FocusedCssClass="" ForeColor="Black" CssClass="RadSubMenu_Padding_TopItem" NavigateUrl="">
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" Text="Welcome From The Dean" backcolor="#F2F2F2" Font-Size="8pt" Width="140px" FocusedCssClass="" ForeColor="Black" CssClass="RadSubMenu_Padding" NavigateUrl="">
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" Text="Welcome From The Co-Chairs" backcolor="#F2F2F2" Font-Size="8pt" Width="140px" FocusedCssClass="" ForeColor="Black" CssClass="RadSubMenu_Padding" NavigateUrl="">
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" Text="Sponsors" backcolor="#F2F2F2" Font-Size="8pt" FocusedCssClass="" Width="140px" ForeColor="Black" CssClass="RadSubMenu_Padding" NavigateUrl="">
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" Text="Contact Us" backcolor="#F2F2F2" Font-Size="8pt" FocusedCssClass="" Width="140px" ForeColor="Black" CssClass="RadSubMenu_Padding_BottomItem" NavigateUrl="">
                                        </telerik:RadMenuItem>
                                    </Items>
                                </telerik:RadMenuItem>
                            </Items>
                        </telerik:RadMenu>
                    </div>
            </td>

CSS:
.RadMenu_DefaultSkin
    {
       font: bold 12px verdana;
       color:white;
    }
    
    .RadMenu_Padding
    {
        padding:10px;
        text-align: left;
        background-color:Transparent;
        color: White;
        font-family: Verdana;
    }
    .RadSubMenu_Padding
    {
        padding: 6px 8px 6px 8px;
        text-align: left;
        border-left: 1px outset #444444;
        border-right: 1px outset #FF7700;
        border-top: 1px outset #F9AE7C;
        border-bottom: 1px outset #999999;
        font-family: Verdana;
        white-space: normal;
    }
    .RadSubMenu_Padding_TopItem
    {
        padding: 6px 8px 6px 8px;
        text-align: center;
        border-left: 1px outset #444444;
        border-right: 1px outset #FF7700;
        border-top: 1px outset #444444;
        border-bottom: 1px outset #F9AE7C;
        font-family: Verdana;
        text-decoration: none;
        white-space: normal;
    }
    .RadSubMenu_Padding_BottomItem
    {
        padding: 6px 8px 6px 8px;
        text-align: left;
        border-left: 1px outset #444444;
        border-right: 1px outset #FF7700;
        border-top: 1px outset #F9AE7C;
        border-bottom: 1px outset #444444;
        font-family: Verdana;
        white-space: normal;
    }
    .RadSubMenu_Padding_SeparatorItem
    {
        padding:0px;
        border-left: 1px outset #444444;
        border-right: 1px outset #FF7700;
        border-top: 0px;
        border-bottom: 0px;
    }
    .RadSubMenu_Padding:hover
    {
        color: White !important;
        background-color: #999999 !important;
    }
    .RadSubMenu_Padding_TopItem:hover
    {
        color: White !important;
        background-color: #999999 !important;
    }
    .RadSubMenu_Padding_BottomItem:hover
    {
        color: White !important;
        background-color: #999999 !important;
    }
#WhiteLink3 A:LINK {
        color:white;
        text-decoration:none;
        cursor:hand;
        text-align:center!Important;
        }

        #WhiteLink3 A:VISITED {
        color:white;
        text-decoration:none;
        cursor:hand;
        text-align:center!Important;
        }

        #WhiteLink3 A:HOVER {
        color:#991E32;
        text-decoration:none;
        cursor:hand;
        text-align:center!Important;
        }

        #WhiteLink3 A:ACTIVE {
        color:white;
        text-decoration:none;
        cursor:hand;
        text-align:center!Important;
        }

[Yana]

Hello Shelley,

Could you please send us the definition of  "top_heading" ?

Best regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.