The CSSPrefix property allows you to place multiple controls of the same type on the same page and differentiate the CSS classes that they use by adding a prefix to the class names. Additionally, it can also be used to specify the style of menu sub-items at any chosen level.
 
This property can be set for the following controls:

 

•CMSListMenu

•CMSMenu

•CMSTreeMenu

 

Example

 

Here's an example of how to specify various styles for particular menu levels:

 

1. First, you need to specify the list of prefixes for particular levels using the CSSPrefix property:

 

CSSPrefix = "MainMenu;MainMenuSubMenu;MainMenuOtherLevels"

 

As you can see, the prefixes used for individual levels are separated by semicolons and every prefix represents a lower level starting from the main one (level 0). The last defined prefix represents all sub-levels below it as well. If you only wish to differentiate the CSS classes used by multiple controls on the same page, one prefix is sufficient.

 

2. Now define the following styles with the specified prefixes:

 

.MainMenuCMSMenu

... for menu control

 

.MainMenuCMSMenuItem

.MainMenuCMSMenuItemMouseUp

... etc. for the first level of the menu (level 0)

 

.MainMenuSubMenuCMSMenuItem

.MainMenuSubMenuCMSMenuItemMouseUp

... etc. for the second level of the menu (level 1)

 

.MainMenuOtherLevelsCMSMenuItem

.MainMenuOtherLevelsCMSMenuItemMouseUp

... etc. for all underlying levels of the menu (level 2 and all remaining sub-levels)