Hover images in menu

Okay, I believe I have pulled half my hair out on this, and I'm sure there is a post or 2 floating around here about hover images BUT for whatever reason, I cant seem to get my menu the way I want it. Below is a link to a page that has her menu the way I want mine.

At first glance, this doesn't look too tough, once you know where to go.

I'm going to assume you are using Thematic or a child-theme that is using the super-fish menu system. If thats the case, all you need are your images, and you can start digging into the CSS for sf-menu. There's a great tutorial thread here on the forum that goes into great detail as to how to bend super-fish to your will, especially it's css.

Rawsta, that is the part I'm trying to accomplish, I want each "link" in the menu to have its own image. I have 2 images for each link, one being the main image, the other being the rollover/hover image. With the tutorial above I can get my menu in the webpage the way I want it, at least at first glance, without the hover effect, but how do I code it in the child theme to hover the way I want it?

I designed my page in the dreamweaver and have the hover effect within the html &css files, but when I try inserting that part of the code into the child theme it doesn't work. I'm not really sure what I'm doing wrong.

...shooting from the hip... If you view the page source, you'll see that thematic produces css classes for each menu item. You can use these classes to produce that menu-item-specific customization, such as individual images. These classes arn't listed in the stylesheets, as they're created dynamically, gotta peek at the source.

Okay I have 5 of the 6 links the way I want them (again, THANKS EVERYONE!!!). But when I add the function to show the "home" link, it messes all the other links up, nor does it have a li class to be able to add my images to.

So, how do I add a link back to the home page without using the "add home link function"?

lol @ access being there to make you crazy! I tried adding in the home using the CSS you typed above, and in doing so it cause the whole menu to go out of whack. I have the wp menu 3.0 option (using the hybrid theme) off so I'm not sure what went wrong. I switched back to the thematic them and when the function that allows the home link is active, my images don't show up, it looks as though it reverts back to the default wordpress menu when home link is active. As long as I keep the function deactivated all my links & images show fine, well except for not having the home link. So I'm clueless as to what isn't right. I'm almost done with the editing of my codes and should have my blog up today, I'll post a link here, maybe you or someone else with fresh eyes might be able to see what is wrong, or if something needs to be added etc etc...

i'm guessing your menu isn't like to change much. and this way you could give the home link a useful class.

quickly looking at your site w/ http://getfirebug.com i see that you are importing the default.css stylesheet. it is common practice to not import that and to instead paste the contents into your stylesheet if you intend to make a lot of mods.

.sf-menu li

has a background of white... which is covering up your images. same for the hover states with sf-menu li:hover