RadMenu CSS text-decoration not working

[Lynn]

I have a RadMenu on a web page.  The definition is shown below.

        <telerik:RadMenu ID="RadMenu1" runat="server" Skin="" EnableShadows="true" >
            <Items>
                <telerik:RadMenuItem runat="server" Text="<br>Admin Home" NavigateUrl="AdminDefault.aspx" CssClass="menu" >
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="<br>Translatables" CssClass="menu">
                    <Items>
                        <telerik:RadMenuItem runat="server"  Text="Topics" NavigateUrl="AdminTopics.aspx" CssClass="menuitem" >
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="News Items" NavigateUrl="AdminNews.aspx" CssClass="menuitem" >
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Press Releases" NavigateUrl="AdminPress.aspx" CssClass="menuitem" >
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Polls" NavigateUrl="AdminPolls.aspx" CssClass="menuitem" >
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="<br>Visitors" CssClass="menu">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>

I am using two different css classes for the items (refer to above).  The styles are defined as shown below:

.menu{ height:49px; color:black; font-family:Arial; font-size:0.750em; text-decoration:none; }
.menu:hover{ background-color:orange; height:49px; text-decoration:underline; text-align:left; color:black; font-family:Arial; font-size:.750em; }

.menuitem { background-color:#739D00; height:24px; text-decoration:none; text-align:left; color:black; font-family:Arial; font-size:0.750em; }
.menuitem:hover{ background-color:orange; height:24px; text-decoration:underline; text-align:left; color:black; font-family:Arial; font-size:.750em; }

.menux{ background:url(images/menu-bg.gif); height:49px; }

When the menu displays, the "text-decoration: underline;" works correctly on class "menuitem" but does not work at all on class "menu".  In fact, I have tried several different "text-decoration" settings and none of them work on the "menu" class.

The screen capture images are attached to complete the evidence.  The graphic "Telerik_MenuIssue_MenuItemClass.gif" shows the lower level items with the underlining working.  The graphic "Telerik_MenuIssue_MenuClass.gif" shows the upper leve items with the underlining NOT working.

What do I need to do to correct this?  Sorry for the rather ugly example, but I'm just trying to get this working before I modify it for use on a production page.

Thanks in advance for anyone's help!

Lynn

[Yana]

Hi Lynn,

Please modify your styles like this in order to fix this:

<style type="text/css">
    .menu { height:49px; color:black; font-family:Arial; font-size:0.750em; text-decoration: none; }
    .menu:hover{ background-color:orange; height:49px; text-align:left; color:black; font-family:Arial; font-size:.750em; }

    .menu:hover .rmText { text-decoration: underline; }
    .menuitem { background-color:#739D00; height:24px; text-decoration:none; text-align:left; color:black; font-family:Arial; font-size:0.750em; }
    .menuitem:hover{ background-color:orange; height:24px; text-decoration: underline; text-align:left; color:black; font-family:Arial; font-size:.750em; }

    .menux{ background:#739D00; height:49px; }
</style>

All the best,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.