Customizing the menu via CSS

Here is a question we have received - and answered - via our helpdesk and we thought that many other designers might be interested in these details:

Is is possible to either use an image instead of text in a menu bar with another assigned for the rollover or assign different menu items to different font styles?
- Yes, both are possible, as described below.

Changing individual menu item colors

Here is how HTML code for menu items looks like:

<li id="idMainMenuItem21268" class="itemCurrentLeaf first">
<div class="hiddenImageBase">
<div class="d1"> <div class="d2"> <div class="d3"><div class="d4"><div class="d5"><div class="d6"> 
<div class="d7"><div class="d8"><div class="d9"><div class="inner">
<span><span>Page name</span></span></div></div></div></div></div></div></div></div></div></div></div>
</li>

Each menu item LI tag has a unique ID, in this example idMainMenuItem21268. Until this page is deleted, ID will stay constant. Thus, you can assign a class to this ID which will only apply to this item, for example:

#idMainMenu LI#idMainMenuItem21268 A,
#idMainMenu LI#idMainMenuItem21268 A:link, 
#idMainMenu LI#idMainMenuItem21268 A:active, 
#idMainMenu LI#idMainMenuItem21268 A:visited, 
#idMainMenu LI#idMainMenuItem21268 A:hover, 
#idMainMenu LI#idMainMenuItem21268 SPAN SPAN 
{
  color: #FF0000;
}

If we want to change something in styles for all subpages of this page, we can use this CSS code (example for the page with id="idMainMenuItem22188"):

#idMainMenu LI#idMainMenuItem22188 UL LI A, 
#idMainMenu LI#idMainMenuItem22188 UL LI A:link, 
#idMainMenu LI#idMainMenuItem22188 UL LI A:active, 
#idMainMenu LI#idMainMenuItem22188 UL LI A:visited, 
#idMainMenu LI#idMainMenuItem22188 UL LI A:hover, 
#idMainMenu LI#idMainMenuItem22188 UL LI SPAN SPAN 
{
  color: #FF0000;
}

This example will change text color for all child pages of that page. Each child page also has its own unique ID. Thus, each page in the hierarchy can be made to look different.

Thus, if we want to change the menu item colors for a specific menu item, we can do this (example for page idMainMenuItem21268):

#idMainMenu LI#idMainMenuItem21268 A,
#idMainMenu LI#idMainMenuItem21268 A:link, 
#idMainMenu LI#idMainMenuItem21268 A:active,
#idMainMenu LI#idMainMenuItem21268 A:visited, 
#idMainMenu LI#idMainMenuItem21268 A:hover, 
#idMainMenu LI#idMainMenuItem21268 SPAN SPAN {
  color: #FF0000;
}
#idMainMenu LI#idMainMenuItem21268 A:hover {
  color: #00FF00;
}
#idMainMenu LI#idMainMenuItem21268 SPAN SPAN {
  color: #0000FF;
}

Note: be careful with inheritance as child objects might inherit styles from their parents.

Replacing menu items with images

You can do it in this way:

1. Rename page to '.' (period)
2. Change text color for this item the same as menu background color
3. Change font size for it to be 1 pixel
4. prepare images. Ideally, each image should be exactly the size of the menu item. Vertical size can be setup for all menu items - or separately for each item. Horizontal size has to be setup the same for all menu items (for the whole menu)
5. Use CSS like this:

#idMainMenu LI#idMainMenuItem21268 A,
#idMainMenu LI#idMainMenuItem21268 A:link, 
#idMainMenu LI#idMainMenuItem21268 A:active, 
#idMainMenu LI#idMainMenuItem21268 A:visited, 
#idMainMenu LI#idMainMenuItem21268 A:hover, 
#idMainMenu LI#idMainMenuItem21268 SPAN SPAN 
{
  background: url(NORMAL-IMAGE-URL) left top no-repeat; 
} 
#idMainMenu LI#idMainMenuItem21268 A:hover 
{
  background: url(HOVER-IMAGE-URL) left top no-repeat; 
} 
#idMainMenu LI#idMainMenuItem21268 SPAN SPAN 
{
  background: url(CURRENT-IMAGE-URL) left top no-repeat; 
}

(replace NORMAL-IMAGE-URL, HOVER-IMAGE-URL, CURRENT-IMAGE-URL) with actual URLs.

Note: when images are used as a background, IE 6 does not cache them. Thus, moving the mouse will always cause a slight delay due to image reload.
IE7 and Firefox do not have this issue.