OK, I know this has been discussed at length already but I am pulling my hair out trying to go this right!

So far, using the WP menu builder I have managed to get my menu items to show up as texted images by using HTML in the "Navigation label" box for each menu item. I have also given each menu item it's own CSS class in order for me to get a custom hover image to display on the menu items.

Here's where I am stuck. I cannot get a the menu item to do anything on hover no matter what CSS insert I add.. All the explanations so far around this have explained in detail up to this point but not exactly what CSS to add to style the individual menu items by their individual classes.

Please would someone be so kind as to have a look at my site and give me a pointer or two.

http://incubit.co.za/wp-login.php

Username: temp
Password: temp99

Thanks in advance!

I would probably use add a class for the menu item and use CSS to add a background image for regular and hover states. To add a class you may have to turn that function on in "Screen Options" for the menu.

Larry,

Thanks, but I did read the multiple poets where you kindly mentioned that. I have assigned classes for each of the two items "mitem1" and mitem2" but I can't seem to get them to respond to any CSS I try to manupulate them with. I'm not sure how the CSS should be structured. I tried:

.mitem1 li a:hover {background: )

and many other things to no avail..

Here is what I might try.
First of all I added this to remove the image

.mitem1 img, .mitem2 img {
    display: none;
}

Then I would add something like the following to add a background image and a hover for the background image

.mitem1,.mitem2 {
    width: 210px !important;
    background: red !important;
    height: 30px;
}
.mitem1:hover, .mitem2:hover {
    background: blue !important;
}

The red and blue are just placeholders. You would of course replace with the path to your background image. You will of course have to add more selectors if you add more menu items.

Damn thank you, you're a genius!! The solution was so simple in the end. The problem seems to have been that one cannot use the method where you place an image with HTML into the "Navigation Label" and still be able to use differing hover background images. I realized now that the image is in front of any background image one assigns. Learn something new every day.

Using the custom CSS Classes to style the items really is as straight forward as I had initially thought.

Once again, thanks Larry..

Oops the hover works with this arrangement but not the links. To use this for hover with links I would add a div to the navigation and use CSS for the regular and hovered states. Here is some code that might point you in the right direction. First take out the image code for the navigation and replace with something like the following (This is for the first menu item)

<div id="mwrapper1" class="mwrapper"><div id="mitem1">Home</div></div>

Then use the following CSS code or something like it.

.menu-item a {
    padding: 0 !important;
}
#mwrapper1 {
    background: path to non-hovered image;
    padding: 0;
}
#mwrapper1:hover {
    background: path to image;
    padding: 0;
}
.mwrapper {
    width: 120px;
    height: 40px;
}
#mitem1 {
    display: none;
}