Change parent link colour when hover child link

Question

I'm trying to do this with CSS.

When I hover Customize or Widgets, I'd like the parent link (Dashboard) to have the red bg/white text styling.

http://jsfiddle.net/oxyns6w7/

.ab-item:hover {
    background:red;
    color:white
}

.ab-submenu li a:hover {
    background:green;
    color:white
}

<div id="dashboard-links" class="bp_components">
    <ul>
  <li class="menupop">
   <a class="ab-item" href="/wordpress/wp-admin/">Dashboard</a>
   <div class="ab-sub-wrapper">
    <ul class="ab-submenu">
     <li>
                        <a href="/wordpress/wp-admin/customize.php">Customize</a>
                        <a href="/wordpress/wp-admin/widgets.php">Widgets</a>
     </li>
    </ul>
   </div>
  </li>  
    </ul>
</div>

How do I achieve this?