Now you will learn how to change the design of the main menu. The main menu used on the sample Corporate Site is displayed using the Drop-down menu web part which is based on the CMSMenu server control.

 

The menu design depends primarily on the applied CSS styles. Here's an example of the CSS styles for the drop-down menu:

 

 

As you can see, these are standard CSS styles. You can modify the styles in the global CSS stylesheet of the given site.

 

The default menu looks like this:

 

 

Now we will change the background color of selected menu items to orange. Go to Site Manager -> Development -> CSS stylesheets and edit () the Corporate Site stylesheet. Select Top menu styles -> Horizontal in the right navigation panel. Change the highlighted line:

 

 

Click OK to save the changes. When go to the live site now, you will see a menu like this:

 

 

Defining the style of a single menu item

 

Every document may have its own style that is used when the document is displayed in the menu. We will try to modify the style of the Home menu item. Go to CMS Desk -> Content and select Home from the content tree. Click Properties -> Menu. Here you can define:

 

•Menu caption - the name of the document when it's displayed in a menu.

•Show in navigation - indicates if the document should be displayed by navigation controls.

•Show in sitemap - indicates if the document should be displayed in the sitemap.

•Menu actions - sets special behaviour for when the menu item is clicked by a user. The link can be disabled, a JavaScript command can be executed, or a specified URL can be opened.

•Menu design - sets styles applied to the document's menu item (standard, mouse-overed and highlighted).

 

Enter the following value into the Menu item style value (in the Menu item design section): background-color: red; and click  Save. Click Live site. Click Services. The Home menu item is now displayed in red: