Question with different pictures in menu

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… "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