How would I style the currently Selected/Active Top-Level Navigation Item Only?

Hi All,

For my website, I’ve created a few (top-level) pages i.e. Home, About, Solutions, Contact etc…. and beneath/within some of those top-level pages, I’ve created sub-pages, and even sub-sub-pages, for some.

Now, I’m using a plugin to help me get the multi-level navigation show and work correctly (with the dropdown’s, fly-out options etc.), however, there was one problem with the plugin to begin with i.e. it did not show/highlight the currently selected tab/item, which is what I’d like to achieve. In other words, if the “Home” tab/nav-item is selected then the tab/nav-item should be styled/highlighted with a white background. This part I have been able to figure out myself, but only for those items which have just the one (top-level) option.

The problem I’m having is that when a sub-page (or even a sub-sub-page) is selected, I would like the topmost-level item to be highlighted/styled with a white background, and the sub-page and/or sub-sub-pages should be styled just like a regular, unselected tab/nav-item, unless it’s hovered over, which is when it will take on the hover style.

I have tried using .current_page_item, .current_page_parent and .current_page_ancestor…but they don’t seem to be the right one’s to use.

I would appreciate any and all help with the code (PHP, CSS, JS etc.) which is required to make this happen…since I’m not much of a web-coder.

I believe I would need some kind of PHP code (probably something on the lines of this here, or the reverse of it….and I’m not exactly sure of how to do it….knowing very, very little PHP

Thanks,

Gerard