In the markup elements below, I’m setting background element on the a elements during the hover event.
What I’m trying to figure is how to make the parent element maintain its hover background state while the child items hover event is active.
Since there is no parent selector in css, I’m not sure how or if it can be done.
<li id="menu-item-18" class="menu-item"><a href="#">About Us</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Contact Us</a></li>
<li class="menu-item"><a href="#">Privacy Policy</a></li>
</ul>
</li>
In other words, when “Contact Us” is hovered over, I want “About Us” to have a background image.
You can do it by giving a rule for
li:hover {}
Since the nested UL is within that LI, the rule will still apply when you are hovering over the nested list. If you don’t want the same background on the sub LIs, you can either give a special class to the top level LIs (or use the given ID) or override the hover effect on sub LIs with a more specific rule.
As Ralph said 
If your round image is applied to the anchor then you would still use the same approach.
li:hover a{background:red}/* top level image or color*/
li:hover li a{background:green}/* turn off the effect on nested lists*/
li:hover li a:hover{background:blue}/* re-instate hover for nested list anchors */
If you have multiple level flyouts then it gets a little tricky as you have to repeat the same for each level.
You can see the red highlight showing the effect you need on this old demo. It leaves a trail through all the flyouts (hover services).