Hey, I'm hoping for some CSS help:
Whenever someone hovers over a link in a menu, I want a section below to appear with more information. I am using a SPAN inside the link. Normally, it is set display:none; then when on hover, it changes to display:block; and absolute positioning. This works in FF, IE5, and IE7. But in IE5.5 and IE6, the SPAN doesn't appear at all.
Here is my prototype (view in FF, IE5 or IE7 to see the effect I'm trying to create. View in IE5.5 or IE6 to see the bug):
The simplified xhtml and css:
<div class="menu">
<div class="wrapper">
<ul>
<li><a class="nav" href="#">Deals<span>HI THERE</span></a></li>
<li><a class="nav" href="#">Products<span>WASSUP</span></a></li>
<li><a class="nav" href="#">About Us<span>COOL</span></a></li>
<li><a class="nav" href="#">Newsletter<span>YA YA</span></a></li>
</ul>
</div>
</div>
.wrapper {
position: relative;
}
a.nav span, a.nav:link span, a.nav:visited span {
display: none;
}
a.nav:hover span, a.nav:active span {
display: block;
position: absolute;
width:500px;
height:120px;
top: 70px;
left: 220px;
}
My idea is that its not working because I'm trying to absolutely position the span outside of its container. I've tried overflow: visible; to no avail.
Thanks in advance for any ideas.
Whenever someone hovers over a link in a menu, I want a section below to appear with more information. I am using a SPAN inside the link. Normally, it is set display:none; then when on hover, it changes to display:block; and absolute positioning. This works in FF, IE5, and IE7. But in IE5.5 and IE6, the SPAN doesn't appear at all.
Here is my prototype (view in FF, IE5 or IE7 to see the effect I'm trying to create. View in IE5.5 or IE6 to see the bug):
The simplified xhtml and css:
<div class="menu">
<div class="wrapper">
<ul>
<li><a class="nav" href="#">Deals<span>HI THERE</span></a></li>
<li><a class="nav" href="#">Products<span>WASSUP</span></a></li>
<li><a class="nav" href="#">About Us<span>COOL</span></a></li>
<li><a class="nav" href="#">Newsletter<span>YA YA</span></a></li>
</ul>
</div>
</div>
.wrapper {
position: relative;
}
a.nav span, a.nav:link span, a.nav:visited span {
display: none;
}
a.nav:hover span, a.nav:active span {
display: block;
position: absolute;
width:500px;
height:120px;
top: 70px;
left: 220px;
}
My idea is that its not working because I'm trying to absolutely position the span outside of its container. I've tried overflow: visible; to no avail.
Thanks in advance for any ideas.