Spry Horizontal Menu different background images (hover and default)?

New to Dreamweaver, new to CSS. I do have some HTML and Actionscript experience, but since I don't have a good CSS foundation I'm over my head in trying to customize the Spry Horizontal menu. What I've managed to get is close, but not at ALL elegant. Here's where I am:

http://www.sullivanandco.com/test/pfp/index-6.html

At this point I'm trying to get the first, middle and last images in a drop-down to be different. I believe that it can be done using <span id="itemX-X"> tags -- I gleaned that from the Adobe Labs samples here:

http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html

But at the same time I decided that I should get rid of all of the duplicate Menu classes I'd created, and things just went from bad to worse:

http://www.sullivanandco.com/test/pfp/index-7.html

http://www.sullivanandco.com/test/pfp/index-8.html

Any help -- just an example of a working Spry menu with different images and highlight images for each item within a single drop-down -- would be MUCH appreciated! I don't expect anyone to work with my kludgy stuff, I just wanted to show how far off track I've gotten...

Many thanks as always!

[edit -- still working on solving IE bugs. Please use Firefox for now. Thank you!]Start Free Trial