stretch menu hoverover issue

5 posts, 0 answers
  1. Jains
    Jains avatar
    9 posts
    Member since:
    Jan 2010

    Posted 05 Feb 2010 Link to this post

     

    I need to stretch the menu which I have but when you hoverover there is a vertical line which I can't remove. I've research and tried everything I can find and need to desparately complete this.
    <table width="994px" cellpadding="0" cellspacing="0" border="0">     
            <tr>    
                <td width="50px" class="tdBackgroundBlueLeft">     
                    &nbsp;     
                </td>    
                <td width="894px" class="tdtop_bot_thin_blue">     
                    <div class="CustomItem">     
                        <telerik:RadMenu ID="RadMenu1" runat="server"  Width="780px" Skin="Web20"   EnableEmbeddedSkins="true"      
                            BackColor="White" Style="text-align: justify" BorderWidth="0" BorderColor="White">     
                            <Items>    
                                <telerik:RadMenuItem Text="home" Font-Size="13px" Font-Bold="True" ForeColor="Navy"    
                                    Style="text-align: justify; text-indent: 10px" BackColor="White" BorderWidth="0px"    
                                    BorderColor="White" Font-Names="Arial" NavigateUrl="Default.aspx">     
                                </telerik:RadMenuItem>    
                           
                                <telerik:RadMenuItem Text="about us" IsSeparator="false" Font-Size="13px" Font-Bold="True"    
                                    ForeColor="Navy" Style="text-indent: 20px" BackColor="White" BorderWidth="0px"    
                                    BorderColor="White" Font-Names="Arial">     
                                        
                                    <Items>    
                                        <telerik:RadMenuItem Width="250px" Text="market leadership" ForeColor="Navy" Style="border-top: none !important;     
                                            border-left: none !important; border-bottom: none !important; border-right: none !important">    
                                                
                                        </telerik:RadMenuItem>    
                                    </Items>    
                                </telerik:RadMenuItem>    
                                 
                                <telerik:RadMenuItem Text="our team" Font-Size="13px" ForeColor="Navy" BackColor="White"    
                                    Style="text-indent: 20px" BorderWidth="0px" Font-Bold="True" Font-Names="Arial">     
                                     
                                    <Items>    
                                        <telerik:RadMenuItem Width="250px" Text="administration" Style="border-top: none !important;     
                                            border-left: none !important; border-bottom: none !important; border-right: none !important"     
                                            ForeColor="Navy">     
                                            
                                        </telerik:RadMenuItem>    
                                    </Items>    
                                </telerik:RadMenuItem>    
                                    
                                <telerik:RadMenuItem Text="our services" Font-Size="13px" ForeColor="Navy" BackColor="White"    
                                    Style="text-indent: 20px" BorderWidth="0px" Font-Bold="True" Font-Names="Arial">     
                                       
                                    <Items>    
                                        <telerik:RadMenuItem Width="250px" Style="border-top: none !important; border-left: none !important;     
                                            border-bottom: none !important; border-right: none !important" ForeColor="Navy"    
                                            Text="market research">     
                                               
                                        </telerik:RadMenuItem>    
                                    </Items>    
                                </telerik:RadMenuItem>    
                                 
                                <telerik:RadMenuItem Text="case studies" Font-Size="13px" ForeColor="Navy" BackColor="White"    
                                    Style="text-indent: 20px" BorderWidth="0px" Font-Bold="True" Font-Names="Arial">     
                                      
                                </telerik:RadMenuItem>    
                                    
                                <telerik:RadMenuItem Text="knowledge center" Font-Size="13px" ForeColor="Navy" BackColor="White"    
                                    Style="text-indent: 20px" BorderWidth="0px" Font-Bold="True" Font-Names="Arial">     
                                      
                                    <Items>    
                                        <telerik:RadMenuItem Width="250px" Style="border-top: none !important; border-left: none !important;     
                                            border-bottom: none !important; border-right: none !important" ForeColor="Navy"    
                                            Text="advisor insights  ">     
                                            
                                        </telerik:RadMenuItem>    
                                    </Items>    
                                </telerik:RadMenuItem>    
                            </Items>    
                        </telerik:RadMenu>    
                    </div>    
                </td>    
                <td width="50px" class="tdBackgroundBlueRight">     
                    &nbsp;     
                </td>    
            </tr>    
        </table>    
     

  2. Yana
    Admin
    Yana avatar
    4841 posts

    Posted 08 Feb 2010 Link to this post

    Hello Jains,

    Please add the following css styles to your page:

    <style type="text/css">
        .RadMenu_Web20 .rmText
        {
            background-image: none !important;
        }
    </style>


    Greetings,
    Yana
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  3. Jains
    Jains avatar
    9 posts
    Member since:
    Jan 2010

    Posted 08 Feb 2010 Link to this post

    Thanks Yana, that worked but it  also removes the background-image when you hover-over or expand the sub menuitems.  I also need the sub menuitems to have a border. 

    Jains

  4. Yana
    Admin
    Yana avatar
    4841 posts

    Posted 08 Feb 2010 Link to this post

    Hi Jains,

    Actually the wrong appearance is caused by text-indent property you've set to the items, please remove it and use padding instead:

    <style type="text/css">
        div.RadMenu_Web20 .rmRootGroup .rmText
        {
           padding-left: 10px;
           padding-right: 22px;         
        }
    </style>

    Best regards,
    Yana
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  5. Jains
    Jains avatar
    9 posts
    Member since:
    Jan 2010

    Posted 08 Feb 2010 Link to this post

    Yana
    Thank you that worked.  I removed the indent and adding in padding at rmRootGroup rmtext.  It stretches the way I need it too. Jains
Back to Top