I've got such a simple code:
<div class="div1">
<div class="div2">Foo</div>
<div class="div3">
<div class="div4">
<div class="div5">
Bar
</div>
</div>
</div>
</div>
and this CSS:
.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 {}
The problem is: When I move the cursor from .div2 to .div3 (.div3 should stay visible because it's the child of .div1) 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 .div5 tag than it's working. Any ideas?
