Spry menus won't display image rollovers

[veramilomilo]

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);
}

[danilocelic AdobeCommunityExpert]

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:
[url]http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602[/url]

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
| [url]http://blog.extensioneering.com/[/url]
| WebAssist Extensioneer
| Adobe Community Expert

[danilocelic AdobeCommunityExpert]

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:
[url]http://gallery.theopalgroup.com/selectoracle/[/url]



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

[veramilomilo]

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