the menu CSS is very complex and only the first level is provided for in the options. Since the child menus are contained in the parent menu element, a change to the parent is inherited by the children. When you click on the parent, the children inherit it's settings. And if the children have submenu's, they inherit it also and so on down the line.
let's take the case 'whitie' shows, Support Plans/Business/residential. Lets say you set the menu ''Background color' to blue, the 'Background color: Hover' to red and the 'Background color: Parent' to gray.
When you are on the home page, the menu shows BLUE, Home is RED and when you hover over 'Support Plan', it is RED and the children are still BLUE. When you move over 'Business', it turns RED, 'Support Plans' turns Gray and 'Residential' stays BLUE. Everything is good. Now you click on 'Support Plans'
Now 'Support Plans' is RED, but when you hover over it and 'Business' and 'Residential' show up, they are also RED. So how to make them BLUE until hovered over.
to change the color and hovers of child menu's, you have to add CSS Inserts for them. This could be used for the case described here
HTML Code:
li.current_page_item ul.rMenu-ver li a:link,
li.current_page_item ul.rMenu-ver li a:active,
li.current_page_item ul.rMenu-ver li a:visited,
li.current_page_item ul.rMenu-ver li,
li.current_page_item ul.rMenu-ver {
background: #0409f1 !important;
}
li.current_page_item ul.rMenu-ver li a:hover {
background: #ee133f !important;
}
li.current_page_ancestor {
background: #dddddd !important;
}
Now if Business or Residential has sub pages, you will have to add more CSS for them.