Eu tenho uma espécie de mapa de imagem, onde usei li para criar os elementos e, ao passar o mouse, as informações aparecem. O código html é:

<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>

E o código CSS para o HTML correspondente é:

#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;
}

Isso funciona esplendidamente em todos os navegadores, mas o IE8 não mostra os períodos em foco. No entanto, se eu colocar uma borda: 1px vermelho sólido; no li, a extensão aparece, mas apenas se o mouse estiver exatamente nessa borda fina de 1px. Não aparece ainda se o cursor estiverdentro o li.

O que eu estou fazendo errado aqui? :( Obrigado pela ajuda.