Hi All -- I've got a few page menus and one ("Info") has a few submenus. As you can see in the attached screenshot "Info Menu from Welcome," when a visitor views the Info menu from another page, in this case Welcome, the Info menu displays correctly, that is, only the items hovered over get the hover color. But when a visitor is on the Info page, the Info menu is completely filled with the hover color. You can see that in "Info Menu from Info."

I'm controlling this through ATO > Menu 1. I'm using Firefox. Is this a known inconsistency, and is there a workaround?

Many thanks!

That's a case where I would use Firebug to "fiddle" with the CSS.

Thanks lmilesw. I wish I could put this more intelligently, but I have no idea what to do. From Welcome, I can roll over the Info menu and inspect an element with Firebug, say Bio, as in the screenshot, but the resulting information doesn't show me anything about the hover color. And if I inspect this element from the Info menu, it doesn't look any different.

Can anyone point me in the right direction in terms of figuring out 1) where the hover behaviour is stored, 2) why it's different on the local page (Info) vs a different page (Welcom), and 3) how to fix it?

lmilesw, can Firebug be used to actually make changes? Or were you saying to use Firebug to figure out what's happening and then make corresponding changes in Atahualpa's CSS Inserts section or something?

Best,

David

can Firebug be used to actually make changes? Or were you saying to use Firebug to figure out what's happening and then make corresponding changes in Atahualpa's CSS Inserts section or something?

you use Firebug to figure out what CSS to put in the CSS Inserts - FireBug makes temporary changes.

Can anyone point me in the right direction in terms of figuring out 1) where the hover behavior is stored, 2) why it's different on the local page (Info) vs a different page (Welcom), and 3) how to fix it?

without a link to the site, exact syntax is impossible. However in general you hav to remember that CSS is 'cascading' so - unless you add different css - child elements get the css applied to the parent.

In this case, you probably set the parent page to something and the child elements get that styling also - you have to shut it off.

Hi All -- I spent a lot of time digging around with Firebug on this, and then a friend hit me with a great workaround: Set the parent page ("Info") to have no content, and move the content that was there to a child page.

ATO > Menu 1 > Don't link first level parent items in Page Menu Bar? > Yes.

If I ever NEED to have content on parent pages, I'll revisit this, but for now, this does the trick.

I started digging into this again, encouraged by some progress I made using Firebug on another front (I found the selector for the submenu, ul.rMenu-ver).

But I looked around and it looks like the issue is present not just for me but whenever the default menu is used. I looked through the Showing Off section and this site has it too: www.stevesamps.co.uk > Look how the rollovers work on the Blog menu from Home, versus the Blog menu from Blog.

It's also in the preview of Atahualpa on Wordpress.Org: http://wordpress.org/themes/atahualpa > Look at the Parent Page menu from Home, versus the Parent Page menu from Parent Page. This is very subtle because there’s only one child page and the colors are very similar. But it’s the same issue.

So, it would be great if this were added to any bug lists that may be flying around. I realize this is minor but it breaks the continuity of the interface.

Meanwhile, in terms of an insert/patch:

It seems to me that what's happening is that when on the parent page, it shows the child links in the menu as "current." I'm using the word "current" from ATO > Menu 1 > "Background color for menu items in hover and current state."

My best guess as to how the “current” state is expressed in the CSS is with li.current-menu-item. (I tested it by adding an insert to style this yellow with !important but it had no effect.)

But we don’t want to change the style of this element, we want to make sure that the child menu elements aren’t defined as “current” on the parent page. As Juggledad says we need to turn that off.

Any ideas would be much appreciated! I'm learning but I'm way over my head here.

this is not a bug, the CSS cascades. In your first post, you have the current page displaying as red and probably the parent color set to red and the hover state set to red. This is why welcome is red and when you hover over bio, it is red and it's parent is red.

Now when you click on info it is now the current page so it is red and (without other css to change it) the color cascades down to it's children, so servces, bio and resume all get the parents color red.

If you want it to work different you need to add more css to change the child's color to something else - this new css you have to code (it's not part of teh imbedded theme options) you would put in the CSS Inserts option.

The menu CSS is the most complex CSS for the theme - play with the css (see Juggledad's colored menu cheat sheet) and take a CSS tutorial class so you get an idea of what csacading does.

Juggledad I'm surprised. So this behavior is by design?

But I looked around and it looks like the issue is present not just for me but whenever the default menu is used. I looked through the Showing Off section and this site has it too: www.stevesamps.co.uk > Look how the rollovers work on the Blog menu from Home, versus the Blog menu from Blog.

It's also in the preview of Atahualpa on Wordpress.Org: http://wordpress.org/themes/atahualpa > Look at the Parent Page menu from Home, versus the Parent Page menu from Parent Page. This is very subtle because there’s only one child page and the colors are very similar. But it’s the same issue.

Don't you think the menu should behave the same way, viewed from any page? Just about every other menu I've seen behaves consistently. It seems to be just the default Atahualpa menu that has this inconsistency. But really, that behavior is an intended part of the theme?

Once again it is how the CSS works. You are free to override this styling if you wish. The menu CSS is based on the ruthsarian design (http://s8.org/ruthsarian/layouts/rMenu/)

You can also avoid that behavior by having the top menu tab not link to a page which is my preferred method of building menus with drop downs. I make the top menu item as a link with just # in the address field.

Thank you, Larry, yes, I was using that as the workaround.

Very happy to say I found a solution, thanks to Tim on this thread: http://forum.bytesforall.com/showthr...ht+parent+menu

Modified to address menu1, and my current colors, this works! However, I'm sure there's some redundancy here, since I added some code on top of Tim's code (because the "current" styling wasn't working), and there's a lot of !important flying around, so I might try to streamline this a bit, but again, it works.

#menu1 ul.rMenu li a:link,
#menu1 ul.rMenu li a:visited,  
#menu1 ul.rMenu li a:active,
#menu1 ul.rMenu li {
    background-color: #A8ABB5 !important;
    color: #777777 !important;
} /* base bg's and colors for everything except hover rules */

#menu1 ul.rMenu li a:hover {
    background-color: #04644B !important;
    color: #FFFFFF !important;
} /* hover rules */

#menu1 ul.rMenu li.current-menu-item a  {
    background-color: #04644B !important;
    color: #FFFFFF !important;
} /* special rule for the currently selected items */

div#menu1 ul.rMenu li.current-menu-item > a:link,
div#menu1 ul.rMenu li.current-menu-item > a:active,
div#menu1 ul.rMenu li.current-menu-item > a:hover,
div#menu1 ul.rMenu li.current-menu-item > a:visited,
div#menu1 ul.rMenu li.current_page_item > a:link,
div#menu1 ul.rMenu li.current_page_item > a:active,
div#menu1 ul.rMenu li.current_page_item > a:hover,
div#menu1 ul.rMenu li.current_page_item > a:visited {
    background-color: #04644B !important;
    color: #FFFFFF !important;
    } /* "current" page and hover, first part old version, taken from css.php, and swapping out the php for local colors, and adding !important */

#menu1 ul.rMenu li.current-menu-item ul li a {
    background-color: #A8ABB5 !important;
    color: #777777 !important;
} /* special rule for children in case parent element is selected */

#menu1 ul.rMenu li.current-menu-item ul li a:hover {
    background-color: #04644B !important;
    color: #FFFFFF !important;
} /* redo so that hover rules "stick" */