Horizontal popup menu with images

[tomthorgal]

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:
[attachment=1]navbar.png[/attachment]
Here is the css:

Code:

ul#nav {
position: relative;
top: 0px;
left: 0px;
width: 700px;
margin: 0 0 0 5px;
height: 40px;
list-style-type: none;
overflow: hidden;
background: transparent url(/images/theme/navbar.png) no-repeat 0 -40px;
}

ul#nav li a {
position: absolute;
top: 0px;
text-indent: -9000px;
text-decoration: none;
padding: 0;
overflow: hidden;
height: 40px;
background: transparent url(/images/theme/navbar.png) no-repeat;
}

ul#nav li.home a { width: 67px; left: 12px; background-position: -12px 0px; }
ul#nav li.home a:hover { background-position: -12px -40px; }
ul#nav li.forum a { width: 76px; left: 102px; background-position: -102px 0px; }
ul#nav li.forum a:hover { background-position: -102px -40px; }

And here is the html:

Code:

• Home
• Forum

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:
[attachment=0]future.png[/attachment]
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.

Thanks for reading,
Tom

[AshtonSanders]

Sounds like you’re overly complicating it.

You will just repeat what you set up on your first button, with an on/off for each link separately.

Your drop down will have three links, and each link has a background image just like you did with your main links. When you hover each individual image, it changes to the "on" position.

[Author]

Posts