title: css hover element to show child, how can I keep the hover css on the parent when I mouseover the child?
body: <p>I have a <code>&lt;ul&gt;</code> with several <code>&lt;li&gt;</code> elements. Inside the <code>&lt;li&gt;</code> element there is a large <code>&lt;div&gt;</code> that is hidden by default. When I hover the <code>&lt;li&gt;</code> its background changes color as does the bottom border as well as displaying the <code>&lt;div&gt;</code>. This is the expected behavior. Note I am using css and not javascript for the hover effect. <code>.menuItem:hover .menuBody { display:block;}</code>. My problem is that when I hover over the now showing <code>&lt;div&gt;</code> its parent, the <code>&lt;li&gt;</code> in this case, loses it's hover style. How can I force the parent to keep the hover styling when I hover over the <code>&lt;div&gt;</code>? Basic html for the menu is like this. Any help or tips is of course appreciated.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="menuItem"&gt;
          &lt;a href="#"&gt;MenuItem&lt;/a&gt;
          &lt;div class="menuBody&gt;&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>