Need Second Drop Down to go with Anylink JS

[dmwhipp]

1) Script Title: Anylink JS Dropdown menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm - though my script has some customizations from John Scheuer and updates to pass HTML5 validation

3) Describe problem: Need a fast easy way to add drop down to one item on secondary menu on a page that is already using Anylink JS Drop Down Menu and Ajax content

I had just finished perfecting the sample page for the client to meet their specs: http://www.floridaschoolbreakfast.org/twomenus.html. The secondary green menu looks exactly the way the want it to look, though they may change a few text items.

Now they would like to have a drop down just on the Recipes item. I have already spent the last hour or two trying to have two anylink menus on the same page, but keep running into different problems with the hover colors and other things.

Can anyone with more script knowledge tell me the best and fastest way to keep everything looking exactly the same while adding 2 drop down items to Recipes in the green menu?
Thank you,
Deborah

[ddadmin]

Can you create a test page with the 2nd Anylink menu added to illustrate the issues you're having with it in terms of hover colors and "other issues"?

[dmwhipp]

Here is the test page I was working on: http://www.floridaschoolbreakfast.org/twomenus.html. I copied the menu files into a different folder since the two menus have different look and renamed most of the style classes, but it's messing up the look of the main site menu.

[ddadmin]

So functionally the two menus work properly for you, just that the desired colors are not showing through? If the later this simply has to do with CSS principles of specificity and inheritance. You might try experimenting using the StyleSheet Editor found inside Developer's View of Firefox or Chrome to see how to get the desired colors to stick, using the !important keyword for example.

[dmwhipp]

Thanks - I've done exactly what you said. It's taken a bit of trial and error, but here is where I'm at now: http://www.floridaschoolbreakfast.org/twomenus.html

The problem I'm having is with the background color on the second menu drop down item which is Recipes. The hover color on the Recipes tab is #262626 (dark gray, like the top menu). It's supposed to be #52c889 (light green, like all the second menu hovers). It is pulling selectedanchor from the first menu stylesheet -- I don't know what to edit to make the second menu pull the selected anchor class -- selectedanchortwo -- from the second menu stylesheet.

Could you point me in the right direction to accomplish this?
Thanks,
Deborah

[Beverleyh]

Going back to what ddadmin said - "this simply has to do with CSS principles of specificity and inheritance" - you need to be more specific with your selectors.

You've already discovered that the "selectedanchor" class is added to the "menuanchorclasstwo" class of the Recipes tab on hover, so why not try combining the selectors to increase specificity on the element?

.menuanchorclasstwo.selectedanchor { background: #52c889 !important }

[dmwhipp]

Thank you Beverly. For some reason, I had added
.selectedanchortwo .menutwo { color:#fff !important; background:#52c889 !important; }
I'm not even sure how I missed adding that style to .selectedanchor, but thank you for showing me the solution!
Deborah