Menu Horizontal CSS --> li:hover IE 8 não funciona!!

[Matryx]

Boas,

Coloco abaixo o código do meu menu horizontal e as respetivas classes em CSS. Este código está a funcionar no Mozilla Firefox, mas no Internet Explorer 8, ao passar o rato pelo menu os submenus aparecem do outro lado da página, e quando o ponteiro do rato sai do menu, estes submenus desaparecem. Já tenho lido que isto deve-se ao facto de a subclasse li:hover não funcionar no Internet Explorer 8, mas ainda não encontrei nenhuma solução que faça este código funcionar nos 2 browsers.

Alguém tem alguma ideia de resolução?


/*HTML *********************/
<table width="640" border="0" align="right">
<tr>
<th scope="col" >
<div id="cssmenu">
<ul id="barra_navegacao" class="">
<li><a href="entrada?op=home">HOME</a></li>
<li><a href="entrada?op=quemsomos">QUEM SOMOS</a></li>
<li><a href="entrada?op=contatos" >CONTATOS</a>
<ul>
<li><a href="index.htm">Local1</a></li>
<li><a href="index.htm">Local2</a></li>
</ul>
</li>
</ul>
</div>
</th>
<th width="149" scope="col">
<img src="quadro_pesquisa.png" name="pesquisa" width="145" height="25" id="pesquisa" align="center"/>
</th>
</tr>
</table>


/* CSS **************/

#cssmenu > ul
{ padding:1px 0;
margin:0px;
list-style:none;
width:100%;
height:21px;
font:normal 8pt verdana, arial, helvetica;
}
#cssmenu > ul li
{ margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:148px;
}
#cssmenu > ul li a:link, #cssmenu > ul li a:visited
{ padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#000000;
color:#ffffff;
width:148px;
height:13px;
}
#cssmenu > ul li:hover a, #cssmenu > ul li a:hover, #cssmenu > ul li a:active
{ padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#666666;
color:#ffffff;
width:146px;
height:13px;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
}
#cssmenu > ul li ul
{ margin:0;
padding:1px 1px 0 0;
list-style:none;
display:none;
background:#ffffff;
width:146px;
position:absolute;
top:21px;
left:-1px;
border:1px solid #000000;
border-top:none;
}


#cssmenu > ul li:hover ul ,#cssmenu > ul li.over ul
{ display:block; //Esta é a instrução que o IE8 não reconhece
}

#cssmenu > ul li ul li
{ width:146px;
clear:left;
width:146px;
}
#cssmenu > ul li ul li a:link, #cssmenu > ul li ul li a:visited
{ clear:left;
background:#000000;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}

#cssmenu > ul li ul li:hover a, #cssmenu > ul li ul li a:active, #cssmenu > ul li ul li a:hover
{ clear:left;
background:#666666;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}

 

[Jammin @]

O IE costuma ter problemas com os hovers em algumas tags entre elas a tag LI

Mas além disso, tens um typo, tens escrito "over" quando devias ter "hover"

Abraço