Top Level Page Menu Highlights All Sub Items
 

Hi guys, I hope I can explain this but it might need a look at my site ibooknewzealand.com .

I have set the Home page to be "New Zealand" the static page. This static page is a parent of several child pages. The problem is that all these child pages show in the dark hover colour, when the parent (home page) is chosen, which looks ugly when you first land.

I guess the way around it is to have a home page with no child pages, but it would be interesting if anyone had any other ideas.
Regards, Joan

I've been struggling with this myself. I know it has something to do with child menus, but I have not been able to figure it out.

when you set a style for a parent item, that style cascades to the child elements (hence the term 'Cascading' in Cascading Style Sheets - CSS)

If you want the child elements to be different, then you must set up a selector and rules for the children

For each child menu item?

[page1] [page2]
[child1]
[child2]
[child3]

I'm almost there. I just need an explanation on the child menus. I have not been able to find any documentation on this.

Page1 has child menus. Page2 does not.
When Page2 is active, hover works as expected on all menu items including children of Page1.
But when Page1 is active, ALL the child menu items take on the hover color identified here:

li.current_page_item ul.rMenu-ver li a:hover { background: #CD4F60 !important; }

So essentially there is no hover in the child menus.

In the Page Menu Bar settings, I have the following set:

Background color: blue
Background color: Hover: red
Background color: Parent: black

Is this working correctly? Is there another setting I missed?

Can anyone point me in the right direction on this?

I cannot figure out where the hover for the child items are controlled.

Thanks!

Kal, did you ever find any closure to this?
I am wanting to see the code/fix for this.

Thanks!

Also looking for the corrective action to take here. Anyone figure it out?

The entire menu formatting in Atahualpa is based on the
---------- DROP DOWN / FLY OUT MENUS --------------------------------
Ruthsarian's rMenu http://webhost.bridgew.edu/etribou/layouts/
modified by Bytes For All http://wordpress.bytesforall.com/

There are more that 400 lines of CSS that deal with the menu's. This is the singe most complicated section of CSS in the style sheet.

when you override the existing settings, you have to either, accept how it comes out or do a lot of overriding. For Example, when you change a parents CSS, it flows to the children. If you want it different then you have to add CSS to have different settings that the parent. there is the flyout, hover, current page item, parent item, and all down at multi levels.

------------------------------------------
Here is how I figure out issues with menu's (and lots of other issues.
1) go visit your site
2) view the source code
3) copy the source code and save it to a text file and give it an extension of 'html' like 'mypage.html'
4) open the file in a browser

Now you have the file open in your text editor and in the browser. You can make a change to the code, do a save and then go to the browser and do a refresh and see the effects of your change. If your editor allow, you can undo the change and save, then refresh in the browser and you are back to where you started.

Now you can go into the code and add CSS to the end of the Atahualpa style sheet and see what happens. Once you get it the way you want, you can copy your changes to the 'CSS Inserts' option of the theme.

This is how I do it, not magic, simply a bunch of testing and looking at the code and playing with the CSS. Some people use FireBug, I like to do it this way since I can rip out vast sections of the code that don't affect the area I'm interested in. For example, if I am working on a menu issue, I remove the middle and footer, I don't need the side bars and posts etc. If I was working on a styling issue, I'd start deleting the style sheet chunk by chunk till I found the code that was causing the issue.