Spry menus won't display image rollovers

Report · Feb 19, 2009

I have a menu that requires a different image for each top-level menu item but, no matter what I do, I'm unable to get my image backgrounds to switch to rollover states on hover/mouseover.

I set up IDs for each of the main menu items and used these to assign a different b/g image to each top <li> tag (the submenus are just CSS color and work correctly). I don't need the submenu arrow indicator so I removed those properties. I've been referring to the instructions, experimenting with endless variations, and searching various forums but I just can't get the rollover effect to work.

A sampling of my CSS attempts follows (I'm sorry -- I couldn't get it to insert with "Attach Code"). Can someone please let me know what I'm doing wrong or if there's another rule(s) I still need to modify or create? I'm all out of ideas and am very desperate for a solution now. Thank you....

Vera

/* Top level menu item -- normal state images: THIS WORKS */
ul.MenuBarVertical #home {
background-image: url(../images/MENU/norm_home.jpg);
}
ul.MenuBarVertical #about {
background-image: url(../images/MENU/norm_about.jpg);
}
etc...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
/* Top level menu item -- hover state images: THIS HAS NO EFFECT */
ul.MenuBarVertical a:hover #home {
background-image: url(../images/MENU/cur_home.jpg);
}
ul.MenuBarVertical a:hover #about {
background-image: url(../images/MENU/cur_about.jpg);
}
etc...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
I also tried this, with no effect:

ul.MenuBarVertical a:hover #home, ul.MenuBarVertical a:focus #home {
background-image: url(../images/MENU/ro_home.jpg);
}

ul.MenuBarVertical a:hover #about, ul.MenuBarVertical a:focus #about {
background-image: url(../images/MENU/ro_about.jpg);
}

Report · Feb 19, 2009

veramilomilo wrote:
> /* Top level menu item -- normal state images: THIS WORKS */
> ul.MenuBarVertical #home {
> background-image: url(../images/MENU/norm_home.jpg);
> }

> /* Top level menu item -- hover state images: THIS HAS NO EFFECT */
> ul.MenuBarVertical a:hover #home {
> background-image: url(../images/MENU/cur_home.jpg);
> }

For future reference, Spry questions are best asked in the Spry forum:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602

If the top selector works and the second one doesn't then it may be due to the location of the a:hover in the second selector. Without seeing a link to a copy of your page (please post links!) it is difficult to determine what the markup up is that you've applied the id of "home" to. Your second selector (the one that doesn't work) means:
Apply a background image to an element with an id of "home" that is within an a tag in the hover state that is within a UL with a class of MenuBarVertical.

If I assume that #home is applied to an <a> tag, then the second selector won't work as the #home link *is* the <a> that is getting hovered over. You might be able to use something like:
ul.MenuBarVertical #home:hover {
background-image: url(../images/MENU/cur_home.jpg);
}

For follow up questions, please post a thread in the Spry group and post a link to your page so that the kind souls that help out can see exactly what the code is for you css as well as for your HTML (and even JavaScript in case there is some sort of conflict involved).

--
Danilo Celic
| http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Report · Feb 19, 2009

danilocelic AdobeCommunityExpert wrote:
> veramilomilo wrote:
>> /* Top level menu item -- normal state images: THIS WORKS */
>> ul.MenuBarVertical #home { background-image:
>> url(../images/MENU/norm_home.jpg); }
>
>> /* Top level menu item -- hover state images: THIS HAS NO EFFECT */
>> ul.MenuBarVertical a:hover #home { background-image:
>> url(../images/MENU/cur_home.jpg); }

If you have CSS that is tripping you up, it may be a good idea to run it through SelectORacle to get a "plain English" version of the selector to see if it makes sense for what you are really trying to accomplish:
http://gallery.theopalgroup.com/selectoracle/

--
Danilo Celic
| http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Report · Feb 19, 2009

Thank you for directing me to the correct forum (I was never able to find the Spry forum outside of your link) and for the Selectoracle link which looks like it will be very helpful.

In experimenting, I've messed up something else in my CSS so as soon as I get it back to a more usable state and try your other suggestion, I will post a new thread to that forum and include a link to the page. (FYI: I assigned #home to the <li> tag, not <a> so that may well be the problem.)

Thanks again!

Vera