title: CSS nested div:hover does not work
body: <p>Intention: </p>
  
  <ul>
  <li>a div with a pretty picture and title</li>
  <li>when the visitor hovers over the div, the pretty stuff is replaced by a descriptive text</li>
  <li>a CSS-only solution</li>
  </ul>
  
  <p>simple, right?</p>
  
  <p>Here's what I am trying:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="drunter"&gt;
      I am below
      &lt;div class="drueber"&gt;
          I am on top
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.drunter {
      position:relative;
      background-color:#f00;
  }
  .drueber {
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      display:none;
      background-color:#00f;
  }
  .drueber:hover {
      display:block;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/dooeg5k3/1/" rel="nofollow">jsfiddle</a></p>
  
  <p><strong>Why is this not working?</strong></p>
  
  <p>When I view the page in Chrome and go about it with the inspector, switch on the :hover state on the "drueber" element, it works as expected. But when I actually hover over the div, nothing happens.</p>