Multiple Background Image Top Menu

Hello

My question is very simple in the ideas field but I don't know
is it is so simple in the implementation field.

What is the fundamental key to implement a menu with a different background
image for each top menu topic, like the one at this address ?

http://www.templatemonster.com/demo/31085.html


How can I distinguish each top menu item in css so I can attribute a
different background image to each one ?


Can anyone guide me through this process ?

Please note, I have some css knowledge but I'm not a programmer so,
if you can, please explain also the intermediate steps.

Really lots of thanks in advance,

Miguel Garcia

Hello

The paragraph bellow is a post of the answer I received trough a support ticket, so other
people can also see it:


" You can use menu item parameters to attach additional class to them in "Menu Params (GavickPro)".
Please edit a menu item and see Menu Params (GavickPro) "


Them I defined in tempalte.css something like bellow for each menu item, where the definedclass is replaced
by the defined class at the menu editor, derived from menu id, for example menuid100 ...

.definedclass {
background: url("../images/topmenu_red_163x52.gif") no-repeat scroll 0 0 transparent;
width: 163px !important;
text-align: center;
}



Note although I achieved part of the success in doing this, as you can see from

webdesignportugal{dot]net/temphost3

I'm still having problems dicribed in a topic named,

"menu height, hover color and active color editing"

and I'm still hoping someone could help me.

how to make multi colored menus

.gkMenu {
position: relative;
margin: 0;
z-index: 1000;
}
.gkMenu > ul {
height: 46px;
margin: 0;
padding: 0;
}
.gkMenu > ul > li {
height: 46px;
font-size: 18px;
font-weight: 500;
background: transparent;
margin: 0 20px 0 0;
}
.gkMenu > ul > li:first-child {
background: none;
}
.gkMenu > ul > li > a {
color: #6c7072;
display: block;
height: 46px;
line-height: 47px;
margin: 0;
padding: 0;
text-transform: uppercase;
text-shadow: 0 1px 0 #00000;
}
.gkMenu > ul > li:hover > a,
.gkMenu > ul > li:active > a,
.gkMenu > ul > li:focus > a,
.gkMenu > ul > li.active:hover > a,
.gkMenu > ul > li.active:active > a,
.gkMenu > ul > li.active:focus > a,
.gkMenu > ul > li.active > a {
color: #29a5fb;
text-shadow: none;
}