stretch menu hoverover issue

[Jains]

 

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>

[Yana]

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.

[Jains]

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

[Yana]

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.

[Jains]

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