Jump to content
Matryx

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

Recommended Posts

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

Share this post


Link to post
Share on other sites
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. :)


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
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 by N3lson

You can't do it, kid. But don't worry, my boy. You're not the only one. No one else can do it.

Share this post


Link to post
Share on other sites
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?


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.