Hi folks,
I have a menu with images as background and the first and the last ones are different from the others (the one that are between them).

See for example this: http://www.templatesbox.com/premium-templates/website-templates/template213.htm

"About us" and "Contacts" are different from "adventure guide", "tours review" and "bike news".

How can I specify different classes for them ?

this is my css:

I have something like this in my css:


.menu ul {
    margin: 0;
    margin-top: 0em;
    padding-bottom: 0em;
    list-style-type: none;
}

.menu ul li {
    float: left;
    display: inline;
    margin: 0px;
    margin-right: 0px;
    list-style-type: none;
    background-image: url(menutemplate0.gif);
    border: 0px;
    width: 170px;
    height: 40px;
    text-align: center;
    align: center;
    vertical-align: middle
     line-height: 40px;
}
.menu li a {
    align: center;
    padding-left: 30px;
}

Thanks in advance,

Mariano