seeking advice on best approach to complex menu design

[Abby]

Sorry for a second post in the same day, but ... I can't waste the good resource that this forum is, right?Here's a screenshot of what I'm trying to achieve. Notice the flower bud on the stem, next to the lit-up button. What's the best way to make that bud image appear down the stem, next to each menu item during its hover state? In other words, the bud should appear next to whichever menu item is selected (hovered over).1) Would I make a separate list, full of bud images, positioned alongside the stem, and set them all to "visibility:hidden" except when the proper class is hovered over? Would "visibility:visible" override its default "visibility:hidden," then? Is there a better way to handle this?2) Would I embed the bud as part of each image? Since it's only supposed to appear during a hover state, how could I get the regular and hover images to align exactly, since the bud is far to the left side of the image? Would I make the regular images the same width as the hover images, but with a lot of empty transparent space on the left? 3) Would I create a sprite strip with ten bud images, and specifiy a different positioning for every class of the hover state?4) Is there a better option that I'm not thinking of?Thanks for any advice on this.

[dsonesuk]

you have to react to the hover state of link, so you have to use that to initiate the hover over effect, using position might be the best approach, by using a span within the anchor, it then can be used to store the image, and with position absolute you can position wherever you require.<li><a title="Art Direction and Game Credits" href="testgamed.html" class="credits"><span></span>Art Direction</a></li>#menu a.credits {background:transparent url(images/menu/m1artdirection1.png) no-repeat scroll left top;position: relative; /*required to correctly position absolute span*/}#menu a.credits span{background: url(images/menu/mybudimage01.png) no-repeat left top;position:absolute;top:0;left:9999em;display:block;width:50px;height:50px; } #menu a.credits:hover span{background: url(images/menu/mybudimage01.png) no-repeat left top;left:100px;}

[Abby]

You come up with these solutions so quick.I had a little trouble until I realized that I had overflow in the menu set to auto instead of visible. It works now. Many thanks!EDIT: Uh oh. It looks great in Firefox, but the menu gets sheared off in IE. How can I fix this?(link to page)

[jeffman]

I know you're having problems now, but I wanted to say that your new design is pretty killer and looks SO EFFING MUCH better than your original page. Rock on!One thing, though. You're already messing with sprites. Are you thinking of turning each menu item into a sprite-pair? Or even all the menu images into one big image of sprites? My first-time experience had a long waiting period while the :hover images loaded. (A tad annoying.) They're all cached now, so it's fine, but you know about first impressions.Anyway, I love the new look. FWIW, I'm poking around your site, too, and you seem pretty cool.

[dsonesuk]

Strange using strict, and yet it displays incorrectly in IE Impossible!OK sarcasm over, when you use display block for a link, its a good idea to define its area height and width, usually to fill the li tag it is in, talking of which, you might want to set the height and width too.I was not quite sure if you were going to use a different bud image for each menu option, so i used the class reference for individual images, but you can tidy it up/shorten by using

 #menu a span {background:transparent url(images/menu/i_budpicker.png) no-repeat scroll left top;display:block;height:33px;left:9999em;position:absolute;top:0;width:36px;}

with a:hover span, you don't require background image as its defined above, all you should declare in the hover is the styling that you want to change from the default setting above.

 #menu a:hover span {left:-59px;}

which brings me to below, the only thing that changes here is the background image.

 #menu a.credits {background:transparent url(images/menu/m1artdirection1.png) no-repeat scroll left top;/*position:relative;*/}

the position:relative; declaration can go in the #menu a

 #menu a {color:red;display:block;line-height:42px;outline-color:invert;outline-style:none;outline-width:medium;padding:0;text-indent:-9999em;  position: relative; }

Here ends my lesson for the day, or night really.

[Abby]

I just want to thank both of you, and this forum in general. I didn't expect to find so much willing help. This forum is a great resource. I'm sure I'll be back with more questions ... but for now, thank you!!!