JTechDev

Keeping Menus Highlighted When Hover Over Children in Wordpress

For quite some time, I was looking for an answer on how to do this, but to no avail. I saw many examples of how to keep the top menu items selected when hovering over their children, but these were simple html examples and did not apply very well to WordPress. Finally, yesterday, I found the answer. This blog post will tell you how to apply this solution.

My initial css code for displaying the menu items highlighted looked something like this:

.main-navigation li a:hover {
    background-color: #FFFFFF
}

This would highlight the menu items as it should, but as soon as you hovered over the child, it would turn back to its normal color. The highlighting would look very weird as it looked unselected when the sub-menu items were selected. Well, I found the solution and it was so simple that I freaked out when I first realized it. Here is what the new code looks something like:

.main-navigation li:hover a {
    background-color: #FFFFFF
}

This makes so much sense when you think about it. Instead of when the link is hovered over “a”, it is when “li” his hovered over, but instead of applying this to “li”, the background color is setting “a”.