RadMenu style borders main items

[Jacques]

Hi there,

I almost succeeded in styling a RadMenu based on Menu.PNG.
The only thing I am not capable of is setting the borders for the main items (see Menu.PNG).
I have encloded a screen shot of my current styled menu (Test.PNG) and below you will find the css for the TEST.png menu.

Thanx!

Marcel

.RadMenu_Test .rmRootGroup, .RadMenu_Test a.rmLink, .RadMenu_Test .rmGroup .rmText, .RadMenu_Test .rmVertical .rmText, .RadMenu_Test .rmLeftArrow, .RadMenu_Test .rmRightArrow, .RadMenu_Test .rmTopArrow, .RadMenu_Test .rmBottomArrow, .RadMenu_Test .rmIcon {
    background-color: transparent;
}


div.RadMenu_Test .rmLink .rmText,
div.RadMenu_Test .rmFocused .rmText {
    line-height: 57px;
    color: red;
    font-size: 18px;
    font-weight: Bold;
}


div.RadMenu_Test .rmSelected .rmText,
div.RadMenu_Test .rmLink:hover .rmText,
div.RadMenu_Test .rmExpanded .rmText {
    color: #555;
}


div.RadMenu_Test .rmGroup,
div.RadMenu_Test .rmMultiColumn,
div.RadMenu_Test .rmGroup .rmVertical {
    background-color: #FFFFFF;
    border: 1px solid #979797;
}


div.RadMenu_Test a.rmLink:hover,
div.RadMenu_Test a.rmExpanded {
    background-color: aqua;
    border-radius: 8px 8px 0 0;
    border-left: 1px solid #979797;
    border-right: 1px solid #979797;
    border-top: 1px solid #979797;
}


div.RadMenu_Test .rmGroup .rmItem .rmLink .rmText {
    color: black;
    line-height: 30px;
    font-size: 12px;
    font-weight: normal;
    text-decoration: underline;
    background-color: white;
}


div.RadMenu_Test .rmGroup .rmItem .rmLink:hover {
    background-color: #fff;
    border: 0px;
}

[Magdalena]

Hi Jacques,

The easiest way to add separators to the menu is setting the render mode property to lightweight.

If you would like to use classic render mode because of supporting IE7, try to apply the following:

.RadMenu_Test .rmItem {
    border-width: 0 1px;
    border-style: solid;
    border-color: transparent #fff transparent #ddd;
}
.RadMenu_Test .rmFirst {
    border-left: 0;
}
.RadMenu_Test .rmlast {
    border-right: 0;
}

Regards,
Magdalena
Telerik

 

 

[Jacques]

Hi Magdalena,

Thank you for your quick reply!
I have applied your code (suggestion 2) and I am getting closer.The only problem left are the seperator/borders applied are still visible when hovering over the main item (see Capture.PNG).

Any idea how to hide the seperators/borders when hovering over the main item?

Regards,Marcel

[Jacques]

Hi Magdalena,

I am very curious in a possible solution as this is the last issue before going live.
I cannot find the attached sample solution you talked about.

Could you take a look?

Thanx!

Marcel

[Magdalena]

Hi Jacques,

It seems that there were some technical problems. We have updated the post so now you can find the attachment.

Regards,
Magdalena
Telerik