Menu and ContextMenu on same page - layout problem

[AnneArents]

Hi,

I have a website with a RadMenu, which works great.
The menu is styled using some CSS.
Now I want to add a RadContextMenu to that same page, but doing so breaks the layout of the RadMenu.

Simply adding an empty contextmenu:

<telerik:RadContextMenu ID="Menu2" runat="server"></telerik:RadContextMenu>

changes the layout of the RadMenu to the default skin (it seems)

This is the RadMenu:

<telerik:RadMenu ID="HoofdMenu" EnableEmbeddedSkins="false" Height="20px" Font-Size="11px" runat="server" CollapseDelay="0" ExpandDelay="0" ClickToOpen="true" ExpandAnimation-Type="None" CollapseAnimation-Type="None" CausesValidation="false"></telerik:RadMenu>

and this is the CSS used to style it:

.hoofdmenu
{
    color: #FFFFFF;
    cursor: pointer !important;
    height: 25px;
    font-size: 12px;
}
.hoofdmenu:hover
{
    color: #8FB1B1;
}

.hoofdmenu_expanded
{
    color: #8FB1B1;
}

.submenu
{
    padding-top: 5px !important;
    background-color: #1C2948;
    color: #FFFFFF;
    height: 25px;
    cursor: pointer !important;
    text-decoration: none;
    font-size: 12px;

}
.submenu:hover
{
    color: #1C2948;
    background-color: #D5E1E1;
}

(The 'hoofdmenu' and 'submenu' classes are given to root and subitems in code)

Any idea how this can happen?

[Kate]

Hi CJ,

In general when you have only a single menu on the page and you set the EnableEmbeddedSkins property to false, no skin file will be loaded (like your initial case). However, once you set an additional menu that uses these styles they will get loaded and consequently applied to the first menu as well. To workaround this, you will need to explicitly specify a specific skin to the menu that you are trying to customize and use this skin instead. Please refer to the following article where it is explained in details how this can be achieved - Tutorial: Creating A Custom Skin Using Sprite.

Regards,
Kate
Telerik