1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

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

Discussão em 'Web Development' iniciada por Matryx, 16 de Julho de 2012. (Respostas: 1; Visualizações: 1117)

  1. 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;
    }
     
  2. Jammin @

    Jammin @ Power Member

    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
     

Partilhar esta Página