[Solved] Retaining parent rollover state when hovering over child

[Electrik]

I’m having trouble with a dropdown menu. Because the rollover state of the top level menu gets a blue tab shape behind it, I have to give the menu option word some padding as, when in the off state, the word has to line up with the graphics below it…hope that makes sense. If you visit the link and hover over “Staging”, then over it’s children you will see the problem

Here is my work in progress: http://sr.hi-speedinter.net/

How do I keep the text in the parent button in the main menu indented when I hover over child menu options?

I have managed to keep the blue tabs applied when hovering over a child, but I just can’t seem to apply padding to just the word in the first-child.

I would have thought the following would do the job…but no

.primary-navigation li:first-child:focus:active > a,
.primary-navigation li.focus:first-child > a {
padding-left: 5px;
padding-right: 21px;
}

I’ve done quite a bit of research and several times thought I had the answer..but well..no. Can anyone help?

[domino989]

Something like the following might be a step in the right direction

ul.nav-menu > li.menu-item:first-child:hover > a {
padding-left:5px;
}

Still needs some refining but I hope it helps.

[Electrik]

Thank you!!! Very grateful! Yes, attributing the state to the parent was the missing link.

[Author]

Posts