This is a migrated thread and some comments may be shown as answers.

RadMenu CSS text-decoration not working

1 Answer 143 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Lynn
Top achievements
Rank 2
Lynn asked on 30 May 2010, 12:12 AM
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:49pxcolor:blackfont-family:Arialfont-size:0.750em; text-decoration:none; }  
.menu:hover{ background-color:orange; height:49pxtext-decoration:underlinetext-align:leftcolor:blackfont-family:Arialfont-size:.750em; }  
 
.menuitem { background-color:#739D00height:24pxtext-decoration:nonetext-align:leftcolor:blackfont-family:Arialfont-size:0.750em; }  
.menuitem:hover{ background-color:orange; height:24pxtext-decoration:underlinetext-align:leftcolor:blackfont-family:Arialfont-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



1 Answer, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 02 Jun 2010, 12:49 PM
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.
Tags
Menu
Asked by
Lynn
Top achievements
Rank 2
Answers by
Yana
Telerik team
Share this question
or