is there a way to highlight an element inside the parent element when the mouse hovers over a child element?

is there a way to highlight an element inside the parent element when the mouse hovers over a child element?

or to explain this better, i have a menu generated by a list with nested lists. i want the parent link to stay highlighted when the mouse hovers over the sub menus. because those sub menus are also generated by jquery (qtip), CSS alone won't do it (tried ul.topnav li:hover a {background-color: #F00;}).

is there a way to do this using jquery?

my menu list looks like this: 
  1. <ul class="topnav"> <li><a href="#">Home</a></li> <li class="subnav"> <a href="#">Tutorials</a> <ul> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> </ul> </li> <li class="subnav"> <a href="#">Resources</a> <ul> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Advertise</a></li> <li><a href="#">Submit</a></li> <li><a href="#">Contact Us</a></li> </ul>