The idea, do like on this website.
1- Identification of the ID number of the menu items
Before begining the customization, you have to note the numbers of the menu items.
To do this, there is multiple solutions :
- use Firebug for Firefox with the function "inspect the element"
- Go to the menu backend for finding the ID numbers
2- Customisation of the menu items color
Now we know the Items numbers, we can begin to customize.
Edit the file template.css
Folder: templates > ja_purity_ii > css > template.css
Take the example of the item n°55 "Explorez Ja Purity II"
here is the CSS code to add :
#menu55 {background: url(../images/grad1-mask.png) repeat-x bottom left #900;}
#menu55:hover {background:#900;}
In the example, I have put an image in the background. But, if you don't want it, you can choose only a color.
Do the same operation for the others Items.
Here is the code for this website :
/*** ITEMS PERSOS ***/
#menu53 {background: url(../images/grad1-mask.png) repeat-x bottom left #666;}
#menu53:hover {background: #666;}
#menu55 {background: url(../images/grad1-mask.png) repeat-x bottom left #900;}
#menu55:hover {background:#900;}
#menu59 {background: url(../images/grad1-mask.png) repeat-x bottom left #260;}
#menu59:hover {background:#260;}
#menu81 {background: url(../images/grad1-mask.png) repeat-x bottom left #069;}
#menu81:hover {background:#069;}
#menu78 {background: url(../images/grad1-mask.png) repeat-x bottom left #fdfd01;}
#menu78:hover {background:#fdfd01;}
#menu82 {background: url(../images/grad1-mask.png) repeat-x bottom left #f4e;}
#menu82:hover {background:#f4e;}
#menu87 {background: url(../images/grad1-mask.png) repeat-x bottom left #ff7200;}
#menu87:hover {background:#ff7200;}
Do the same thing if you want for the submenu Items.
