Example: Customizing Multi-Level Menu Styles (Classic Themes)

A multi-level menu is comprised of one or more menu items arranged either horizontally or vertically, with each capable of further displaying one or more levels of child submenus (leaves).  These styles control the look-and-feel of the menu:

PageStylesMultiLevelMenuHorizontal

For this example, we’ll only modify the default definitions (from the Andes page style) which specifically control the menu item/link text and submenu popup and link text:

.MLMmC { /* horizontal menu item link text */

     background-color: #f7f7f7;

     background-image: url(../Images/menuT.gif);

     background-position: top center;

     background-repeat: repeat-x;

     border: 1px solid #a8bf85;

     color: #888888;

     cursor: pointer !important;

     display: block;

     font-family: Verdana, Geneva, ms sans serif;

     font-size: 11px;

     padding-bottom: 2px;

     padding-left: 4px;

     padding-right: 4px;

     padding-top: 2px;

     }

 

.MLMmenusub { /* horizontal submenu container (menu leaves) */

     border: 1px solid #a8bf85;

     z-index: 100;

     }

 

.MLMsubmC { /* horizontal submenu item link text */

     background-color: #e4f5d3;

     color: #888888;

     cursor: pointer !important;

     font-family: Verdana, Geneva, ms sans serif;

     font-size: 11px;

     padding-bottom: 2px;

     padding-left: 4px;

     padding-right: 4px;

     padding-top: 2px;

     }

 

.MLMsubmoC { /* horizontal submenu item link text hover state */

     background-color: #ffffff;

     color: #666666;

     }

With these default definitions, the horizontal multi-level menu renders as:

ExampleMLMBefore

Now let’s instead make the parent menu item’s background color a bright red, its text black, and remove the graphic used to create the beveled look of the menu item:

/* new definitions in Styles.css */

.MLMmC { /* horizontal menu item link text */

     background-color: #ff6666; /* override default attribute */

     background-image: url(../Images/space.gif); /* override default attribute */

     color: #000000; /* override default attribute */

     }

For the submenu, let’s change its borders to black, its text links to white and all capitalized, its background color to a pink, and its hover text links to black:

/* new definitions in Styles.css */

.MLMmenusub { /* horizontal submenu container (menu leaves) */

     border: 1px solid #000000; /* override default attribute */

     color: #ffffff; /* override default attribute */

     text-transform: uppercase; /* add new attribute */

     }

.MLMsubmC { /* horizontal submenu item link text */

     background-color: #ffaaaa; /* override default attribute */

     }

.MLMsubmoC { /* horizontal submenu item link text hover state */

     color: #000000; /* override default attribute */

     }

The customized multi-level menu renders as:

ExampleMLMAfter

If you also want to provide your own dingbat bullets, i.e., replacing the default “arrow” for parent menu item and “nine dots square” for child submenus, simply substitute your own images for MLMBullet1.gif and MLMBullet2.gif.