RadMenu CSS text-decoration not working

2 posts, 0 answers
  1. Lynn
    Lynn avatar
    186 posts
    Member since:
    Sep 2006

    Posted 29 May 2010 Link to this post

    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



  2.
  3. Yana
    Admin
    Yana avatar
    5013 posts

    Posted 02 Jun 2010 Link to this post

    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.
Back to Top