Navigation drop downs and image rollovers

[apfhex]

I'm working on a website where I have a horizontal navigation bar with vertical drop down menus under some of the links. The main bar is composed of images which I want to have rollover states. I though this would be simpler but I'm having the damnedest time getting both those things together and working. I've gone over all the popular tutorials found through Google and I just can't get it to look or work quite right.

I'm not normally a web designer but I have successfully tackled a number of sites before. I'm pretty frustrated with this, though. Perhaps someone can point me in the right direction. I don't care if it's done with CSS or Javascript or something else, as long as it works in most browsers.

I attached an image with one of the proposed rollovers showing as well as one of the drop down menus. I was trying to use this Anylink CSS Menu but even then the rendering is funky in all browsers (the menus are offset quite a bit to the right of where they should be, a seemingly arbitrary amount, and I can't figure that out at all).

I'd post my code but it's in such a state of flux, and I'll probably just have to start from scratch anyway.

 

[ChicoWeb]

You want to use the sliding door trick. The gist is you create 1 image, with two or three rollover states (http://chicowebdesign.com/images/nav/the_firm.gif), then use CSS and negative position. I do it on my site, www.chicowebdesign.com. Then you'll need to use css and javascript for the drop downs. http://www.alistapart.com/articles/dropdowns

 

[apfhex]

Thanks. I saw some stuff about using sliding doors and that seemed like a decent option, however I was having difficulty implementing it along side the drop down menus I had.

Actually I came across this article on CSSplay that does exactly what I want. I'm in the middle of implementing it now. It does require quite a bit of CSS code, but it avoids javascript altogether too, and is easy to integrate into my design with the way I have everything set up.