IE8 does not hover when using an li with position:absolute

Question

I have a sort of an image map, where I've used li's to create the elements, and on hovering the information pops up. The html code is:

<li id="b906" style="z-index: 1000;">
    <a href="#">
        <span>&nbsp;</span>
        <span class="para">Some text and maybe an image goes here.</span>
    </a>
</li>

And the CSS code for the corresponding HTML is:

#map ul li {
position: absolute;
list-style: none;
top: 0;
left: 0;
width: 100px;
height: 100px;
text-align: center;
display: block;
}

#map ul li a {
color: #000;
text-decoration: none;
color: #fff;
display: none;
position: absolute;
top: 0;
left: 0;
}

#map ul li:hover a {
display: block;
}

#map ul li a span {
display: block;
width: 100%;
height: 120px;
border: 2px solid #777;
}

#map ul li a span.para {
display: block;
background: #777;
padding: 2px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100px;
}

This works splendidly in all the browsers, but IE8 does not show the spans on hover. However, if I put a border: 1px solid red; on the li, the spans do show up, but only if my mouse is exactly on that 1px thin border. Doesn't show up still if the cursor is inside the li.

What am I doing wrong here? :( Thanks for the help.

Answer 1

Internet Explorer has some problems with dealing with :hover events, especially for li elements. You need to use this: http://www.xs4all.nl/~peterned/csshover.html

Should work for you then. If all else fails, and in my case, I use jQuery's hoverIntent to show menus reliably.

Answer 2

From http://msdn.microsoft.com/en-us/library/ms530766.aspx

Windows Internet Explorer 7 and later, in standards-compliant mode (strict !DOCTYPE), can apply the :hover pseudo-class to any element, not only links. If the pseudo-class is not applied specifically to an element in the selector, such as the A tag, the Universal (*) Selector is assumed. Indiscriminate use of the :hover pseudo-class can negatively impact page performance.

See Defining Document Compatibility