title: hover state is quirky
body: <p>I have been working on a drop down menu, that has different colors for both parent and child, which change when in a hover state:</p>
  
  <p><a href="http://jsfiddle.net/cELJ6/1/" rel="nofollow">http://jsfiddle.net/cELJ6/1/</a></p>
  
  <p>I have a small quirk with this though.</p>
  
  <p>The <code>Home</code> link is fine as are the <code>Products</code> and <code>Section2</code> are fine when not hovered.</p>
  
  <p>The problem is:</p>
  
  <p>1) When I hover over <code>Product</code>, the color of the link needs to be white. (BG color is fine and working correctly)</p>
  
  <p>2) When I hover over a child element, such as <code>Product1</code>, then <code>Products</code> link color needs to be white</p>
  
  <p>Hovering between <code>Products</code> and <code>Section2</code> seems to be quite quirky. Sometimes the color is white, sometimes it is grey (#777)</p>
  
  <p>Is there a way around this?</p>
  
  <p>Thanks</p>