After a lot of playing around with the CSS of it and editing my image size, I was able to resolve the issues I had posted about. Notably, I had some white space in each of the drop down options, which I eventually figured out to be the margin from the li tag, so I put in a reset tag to ensure all my margins were 0px and that resolved the problem nicely.

I think I may have borked some existing CSS as I try to incorporate the menu into a pre-existing page, mind you, but at least the menu works and looks oh-so-pretty! Thanks so much for your tutorial, examples and your response.

I’ve got things looking the same in IE and Firefox, but they’re equally borked. If you have a couple of minutes to help out, that would be hugely appreciated!

1) While the background image is moving up on hover as it should, the original menu item is also visible, directly above the hovered item.

2) I have an unseemly white space left of my drop down text that I can’t, for the life of me, figure out how to get rid of.

http://juliemartin.org/menu/testing-menu3.html

Thank you so much for any help you can provide. This has been a great resource as I struggle to help out a friend.

Thanks for the quick reply. It’s okay now. I think I have found a way to work around it. It just needed an additional element:

.font-size: 0;

Thanks so much.

I knew I’d need to change my top: designations for the items in my list…but I also knew there was something silly I was overlooking to keep them from displaying in the first place. Seems obvious now, but I sure was stumped before. Thanks for saving me a lot of time and stress!

I’m brand new to CSS, and so far your tutorial has been invaluable not just as a design aid for my current project, but also as a window into the workings of CSS overall.

That said, I’m running into some trouble in working to adapt your code to my purposes. I’m trying to fashion a vertical nav bar with rollovers and dropdowns/flyouts (I haven’t even gotten to the dropdowns yet). The master list for my navbar contains ten items, the first four of which I’ve managed to arrange without any difficulty. After that though, I can’t get any of my images to display over my text entries…or, for that matter, to display anywhere on the page! I’ve spent a couple hours over the last day or two tinkering around with positioning (changing px values, etc.), but I’m not seeing any results, and I’m not sure what else to try.

Any thoughts? My page in progress is here:

http://www.greenleaftutoring.com/Greenleaf%20IRnav.html

and the image I’m working with is here:
 http://www.greenleaftutoring.com/nav.gif

I’d appreciate any help you can provide!

Humbly yours,
 Brian