title: Pseudo class :hover does not work in IE7
body: <p>I've got such a simple code:</p>
  
  <pre><code>&lt;div class="div1"&gt;
    &lt;div class="div2"&gt;Foo&lt;/div&gt;
    &lt;div class="div3"&gt;
      &lt;div class="div4"&gt;
        &lt;div class="div5"&gt;
          Bar
        &lt;/div&gt;        
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.div1{
    position: relative;
  }
  .div1 .div3 {
    position: absolute;
    top: 30px;
    left: 0px;
    width: 250px;
    display: none;
  }
  .div1:hover .div3 {
    display: block;
  }
  .div2{
    width: 200px;
    height: 30px;
    background: red;
  }
  .div4 {
    background-color: green;
    color: #000;  
  }
  .div5 {}
  </code></pre>
  
  <p>The problem is: When I move the cursor from <code>.div2</code> to <code>.div3</code> (<code>.div3</code> should stay visible because it's the child of <code>.div1</code>) then the hover is disabled. I'm testing it in IE7, in FF it works fine. What am I doing wrong? I've also realized that when i remove <code>.div5</code> tag than it's working. Any ideas?</p>