Menu style customization

You can make menu style customizations in the style sheets your site uses.

Navigate to Content Management > Design > Style Sheets to customize style sheets.

Supplementary page navigation menu example code

In the example below, look at the CSS class selectors and rules. Also, note how the block containers (div.cms_menu_section_blocks) are defined based on the outer container (TD.layout_content_submenu_column). The outer container is actually a part of the site layout. This is clearer if you compare the styles to those used in the super menu further down in the example. The lesson is that there is no need to make a completely new menu system - just use CSS to change the look and feel of existing menus.
/*********************************************************************************************************************************************************
   SUB MENU VARIATIONS FOR HORIZONTAL MENUS - Section Blocks Menu (cms_menu_section_blocks UI Macro)
*********************************************************************************************************************************************************/
 
TD.layout_content_submenu_column DIV.cms_menu_section_blocks{width:156px;height:auto;float:left;position:relative;border-style:solid;margin:0px0px0px0px;border:0pxsolid#e0e0e0;padding:0px;background:none;padding:24px12px0px12px;}
 
TD.layout_content_submenu_column DIV.sub_menu_section{width:156px;height:20px;float:left;border-style:solid;border:0pxsolid#e0e0e0;padding:0px;background:none;padding:0px12px0px12px;}
 
SPAN.cms_sub_menu_list_link, TD.submenu_cell A   {color:#FFF;}
 
TD.layout_content_submenu_column IMG.menu_bullet{display:none;}
 
TD.cms_menu_section_blocks_title h2, TD.cms_menu_section_blocks_title h2 a, TD.cms_menu_tab_blocks_text h2 {margin:0;padding:0px;font-size:11px;text-transform:uppercase;color:#42C4DD;font-weight:normal;white-space:nowrap;}
 
TD.layout_content_submenu_column a.cms_menu_block_item{margin:0;padding:0px;font-size:11px;color:#FFF;}
 
TR.layout_content_submenu_row TD.layout_content_submenu_column{background:transparenturl(sub_menu_background.gifx)repeat-ycentertop !important;}

Super menu sections example code

This menu is essentially a simple float grid. The defaults are written first. Then, below the "SUPER MENU VARIATIONS..." comment, the defaults are overwritten by adding a containing div with a unique class. In the code that renders the header for the base system, the bottom menu resides in a table cell with the class of "cms_header_bottom_menu" (note the TD.cms_header_bottom_menu CSS selector).
/***********************************************************************
/********************
   Section Blocks Menu (cms_menu_section_blocks UI Macro)
   *********************************************************************
   **********************/
   div.cms_menu_section_blocks{width:260px;height:260px;float:left;
   border-style:solid;margin:0px0px12px12px;border:1pxsolid#e0e0e0;
   padding:10px;background:url(blue/portal_horizontal_bkg.pngx)repeat-
   xcenterbottom;}

p.cms_menu_separator{border-top:1pxdotted#ccc;margin-top:6px;margin-
bottom:6px;}

td.cms_menu_section_blocks_title h2, td.cms_menu_section_blocks_title h2
a, td.cms_menu_tab_blocks_text h2
{margin:0;padding:0px;font-size:larger;font-weight:normal;color:#444;}

a.cms_menu_block_item{margin:0;padding:0px;color:#999;font-size:inherit;
}

/***********************************************************************
/********************
   SUPER MENU VARIATIONS FOR HORIZONTAL MENUS - Section Blocks Menu
   (cms_menu_section_blocks UI Macro)
   *********************************************************************
   **********************/
   TD.cms_header_bottom_menu.cms_menu_super_menu_bar{/*style the super
   menu drop down bar
   */z-index:199;float:left;background:none;margin-left:44px;}

TD.cms_header_bottom_menu
div.cms_menu_section_blocks{width:200px;float:left;border:0px;margin:
0px0px12px0px;padding:0px;background:none;}

TD.cms_header_bottom_menu
p.cms_menu_separator{border-top:0pxdotted#ccc;margin-top:0px;margin-
bottom:0px;}

TD.cms_header_bottom_menu.cms_menu_super_menu_bar_item{/*style an item
on the super menu drop down
bar*/z-index:200;float:left;padding-left:12px;padding-right:12px;padding
-bottom:8px;padding-top:4px;cursor:pointer;cursor:
hand;font-weight:bold;color:#000;border-left:1pxsolid#FFF;border-top:
1pxsolid#FFF;}

TD.cms_header_bottom_menu.cms_menu_super_menu_bar_item_selected{/*style
a selected item on the super menu drop down
bar*/z-index:200;float:left;padding-left:12px;padding-right:12px;padding
-bottom:8px;padding-top:4px;cursor:pointer;cursor:
hand;background:#fffurl(super_menu_bkg.gifx)no-repeatlefttop;font-weight
:bold;border-right:0pxsolid#CCC;border-bottom:0pxsolid#CCC;border-left:
1pxsolid#DDD;border-top:1pxsolid#EEE;

}
}
TD.cms_header_bottom_menu.cms_menu_super_menu_content{/* style super
menu content block
*/position:absolute;z-index:999;height:260px;display:none;padding:18px;
background:#dedfe0url(super_menu_bkg.gifx)no-repeatlefttop;border-right:
1pxsolid#CCC;border-bottom:1pxsolid#CCC;border-left:1pxsolid#DDD;
box-shadow:5px5px6px#666; -webkit-box-shadow:5px5px6px#666;
-moz-box-shadow:5px5px6px#666; filter:
progid:DXImageTransform.Microsoft.dropShadow(color=#666, offX=5, offY=5,
positive=true);}

TABLE.super_menu_video_table{background:#787878url("grey_background.pngx
")repeat-yscrollcentertop;width:184px;}