Menu
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?
734
IE7 won't allow you to apply :hover pseudo-classes to non-anchor elements unless you explicitly specify a doctype. Just add a doctype declaration to your page and it should work perfectly.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
More on IE7/quirks mode can be found on this blog post.
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
