First I wanted to thank Chris for his fantastic tutorials and screen casts. I’ve watched all your screen casts, and I can honestly say that 90% of all my CSS knowledge comes from you. The other 10% I’ve learned by taking apart other websites CSS files and just trying out things on my own.
Ok, now to my problem. Let me explain what I’ve done so far. I have a simple horizontal navigation on my website right now with only 2 "buttons". It is one background image that I changes depending on where the users mouse moves over.
Here is the background picture:
Here is the css:
Now what I would like to be able to do, is to have a submenu open when a user hovers over the Forum link. I found much information on how to accomplish this with just text, with just CSS or in compination with JQuery, but no matter what I tried, I could never get it done with images. Whenever I got the ul li ul li to popup, it showed me the image of the parent ul li instead of the child ul li as a background.
Here is the image I tried to accomplish this with:
So let me explain. When the user hovers over the Forum link, he will first be presented with the popup for the 3 subforum links. Then when the user moves the mouse over the first subforum link, it is supposed to change to the part of the image were the Forum One is in white, when he moves to the Forum Two, the background should change to the part were Forum Two is in white … an so on.
Has anyone gotten this done before, or could point me to some resources that explain image popup navigation? I’ve googled for hours now, and I just can’t find anyone help on this.