How to add a drop-down menu to a rollover image?

Question

Hi,
I guess my title says it all... I was wondering how to add a drop-down menu to a rollover image? I know that there's the sprymenu, but I need to have my own rollover images.
Thanks,
Kazem

Answer 1

Frankly, ANY link can offer a drop down.
Take a look at this turorial.
That will get you your dropdown menu. So you have that.
Now, on your top menu (or any level where you want to have an image instead of text do this:
(I am copying the HTML structure in the tutorial here):
<nav>
          <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Tutorials</a>
                              <ul>
                                        <li><a href="#">Photoshop</a></li>
                                        <li><a href="#">Illustrator</a></li>
                                        <li><a href="#">Web Design</a></li>
                              </ul>
                    </li>
                    <li><a href="#">Articles</a>
                              <ul>
                                        <li><a href="#">Web Design</a></li>
                                        <li><a href="#">User Experience</a></li>
                              </ul>
                    </li>
                    <li><a href="#">Inspiration</a></li>
          </ul>
</nav>
Now, let's pretend you want an image instead of the word "Articles." You'll want the image to be sized appropriately, and if you look at the CSS, you'll see it's 112 pixels wide by 52 high. If your image is approximately those dimensions, you're all set.
So instead of "articles" you insert your image.
Done.