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

[brunoais]

• Não usas tags code apropriadas.
  
• Não indentas o código (se tens problemas a indentar no editor muda o modo do editor. Botão mais à esquerda no topo no editor)
  
• Não contextualizas o código convenientemente
  
• Cheira-me demasiado a tabelas para formatar a página. Isso não se usa desde o HTML4. Não acredito que estejas a usar o HTML antes do HTML4.
  

Quando corrigires isso volta aqui. 🙂

[N3lson]

#cssmenu > ul li:hover ul ,#cssmenu > ul li.over ul

{ display:block; [i][u]//Esta é a instrução que o IE8 não reconhece[/u][/i]

}

Será disto ?

Edited July 21, 2012 at 04:43 PM by N3lson

[yoda]

O IE8 tem suporte ao display:block, tenta reduzir o encadeamento na declaração do estilo.

[Jessica-riberio]

Olá, veja se esse tutorial te ajuda:

Criando um Menu horizontal Dropdown em CSS

Edited October 11, 2012 at 07:13 PM by Jessica-riberio

[brunoais]

Aqui:

#cssmenu > ul li:hover ul ,#cssmenu > ul li.over ul

{ display:block; [i][u]//Esta é a instrução que o IE8 não reconhece[/u][/i]

}

Será disto ?

Nisto:

li.over

Está bem?