Expert: Andrew Hoffman - 5/7/2008

Question
Hi Andrew,

I was wondering something...I have a rollover menu that I created in Dreamweaver:

http://catalinahotel.com/allie/v2/

I wanted to change it into a flyout menu and was thinking that css might be the easiest way to do it. Is there such a thing as a css rollover flyout menu? Could I use the jpgs I already created to make it?

Thanks!!

Allie

Answer
I think this will suit you very well.  Pure CSS using no JavaScript at all.

http://www.cssplay.co.uk/menus/flyout_4level.html

You should be able to keep the jpgs you've already created as well.  It seems you'll have to use them as a background images in .menu a and hide the text using CSS.

But since you will have different images to use as background images, you'll have to assign IDs to each <a> and reference them in the CSS.

.menu a { /* applies to all <a> inside <ul> with class 'menu' */
text-indent:-9999px; /* hide the link text */
}
.menu a#about_us { /* targets only <a> using id 'about_us' */
background: url('image1.jpg') 0 0 no-repeat;
}
.menu a#catalina { /* targets only <a> using id 'catalina' */
background: url('image2.jpg') 0 0 no-repeat;
}

and so on...

Just make sure to keep your IDs unique, as repeating an ID two or more times will cause unpredictable bugs.

Good luck,
Andrew