title: Change parent link colour when hover child link
body: <p>I'm trying to do this with CSS.</p>
  
  <p>When I hover <code>Customize</code> or <code>Widgets</code>, I'd like the parent link (<code>Dashboard</code>) to have the red bg/white text styling.</p>
  
  <p><a href="http://jsfiddle.net/oxyns6w7/" rel="nofollow">http://jsfiddle.net/oxyns6w7/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ab-item:hover {
      background:red;
      color:white
  }
  
  .ab-submenu li a:hover {
      background:green;
      color:white
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="dashboard-links" class="bp_components"&gt;
      &lt;ul&gt;
    &lt;li class="menupop"&gt;
     &lt;a class="ab-item" href="/wordpress/wp-admin/"&gt;Dashboard&lt;/a&gt;
     &lt;div class="ab-sub-wrapper"&gt;
      &lt;ul class="ab-submenu"&gt;
       &lt;li&gt;
                          &lt;a href="/wordpress/wp-admin/customize.php"&gt;Customize&lt;/a&gt;
                          &lt;a href="/wordpress/wp-admin/widgets.php"&gt;Widgets&lt;/a&gt;
       &lt;/li&gt;
      &lt;/ul&gt;
     &lt;/div&gt;
    &lt;/li&gt;  
      &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I achieve this?</p>