Radmenu Rounded Corners Border

[Allan]

I have very basic Radmenu

I would like to remove all boarders form all parts of the menu including root, vertical etc.

I know if I set the css for root to border:none !important all borders are removed.

However, once I apply

EnableRoundedCorners="True"

A 1px upper and lower border are also applied to the sub menu containers.

Is there anyway to remove ALL border when rounded corners is enabled

Here is my CSS

/* <RadMenu / ETP> */

.RadMenu_ETPZ2 .rmRootGroup, .RadMenu_ETPZ2 a.rmLink, .RadMenu_ETPZ2 .rmText
{
    border:none !important;
    font: normal 12px "Segoe UI" ,Arial,Helvetica,sans-serif;
    line-height: 22px;
}

.RadMenu_ETPZ2 .rmRootGroup
{
    border:none !important;
    background-repeat: repeat-x;
    background-color: transparent;
    margin: 0 !important;
    padding: 0 !important;
}

.RadMenu_ETPZ2 .rmVertical
{
    border:none !important;
    background-color: #FDF4B9;
    background-image: url('../images/back_menu.jpg');
}

.RadMenu_ETPZ2 .rmSlide > ul.rmVertical
{
        border: 1px solid #4265ac;
}

/* <Root items> */


.RadMenu_ETPZ2, .RadMenu_ETPZ2 a.rmLink, .RadMenu_ETPZ2 .rmRootLink
{
    color: #000000;
    font-size: 14px;
}

.RadMenu_ETPZ2 .rmItem, .RadMenu_ETPZ2 a.rmFocused, .RadMenu_ETPZ2 a.rmSelected
{
    background-position: 0;
    background-color: transparent; /* Selected menu*/
}

.RadMenu_ETPZ2 .rmLast a.rmExpanded .rmText
{
    background-repeat: no-repeat;
}

.RadMenu_ETPZ2 a.rmDisabled, .RadMenu_ETPZ2 a.rmDisabled:hover
{
    color: #7d7d7d;
    background-position: 0 500px;
}

.RadMenu_ETPZ2 .rmVertical .rmLink, .RadMenu_ETPZ2 .rmHorizontal .rmLink
{
    margin-right: 0px; /* Distance between menu items*/
}


/* Separators */

.RadMenu_ETPZ2 .rmSeparator
{
    padding: 1px;
    background-color: #4265ac !important;
}

.RadMenu_ETPZ2 .rmSeparator .rmText
{
    background-color: #4265ac !important;
}


/* Containers */

DIV.RadMenu_ETPZ2 .rmItem .rmLink:hover
{
    border:none !important;
    color: #CC0000;
    background-color: transparent;
}

DIV.RadMenu_ETPZ2 .rmGroup .rmItem .rmLink .rmText
{
    padding-left: 10px;
    padding-right: 53px;
    margin-left: 4px;
    margin-right: 0px;
    width: 100px;
}

DIV.RadMenu_ETPZ2 .rmGroup
{
    padding-bottom: 10px !important;
}

Thank you.

Allan

[Kate]

Hi Allan,

To remove all of the borders of the RadMenu control you will need to get the correct css class selector and override it (this can be achieved by increasing the specificity of the selector as explained here). For his purpose I would suggest that you use the FireBug tool (used in FireFox) that would be very helpful in locating the desired selectors. I would also recommend that you refer to this help article where you can get more information on the different css classes that are currently applied to the RadMenu control.

Regards,
Kate
Telerik