(Resolvido) Erro no menu

Nelma · Janeiro 29, 2008

Bom dia

Eu estou desenvolvendo um site Link. Mas esse menu não funciona em alguns pc's. Aqui eu testei no IE7 e no Firefox.

O script do menu é o seguinte:

<style type="text/css">
<!--
ul#navmenu {
  margin: 0;
  border: 0 none;
  padding: 0;  
  width: 760px; /*For KHTML*/  
  list-style: none;  
  height: 24px;
  }
ul#navmenu li {
  margin: 0;  
  border: 0 none;  
  padding: 0;  
  float: left; /*For Gecko*/  
  display: inline;  
  list-style: none;  
  position: relative;  
  height: 24px;
  }
ul#navmenu ul {  
    margin: 0;  
    border: 0 none;  
    padding: 0;  
    width: 160px;  
    list-style: none;  
    display: none;  
    position: absolute;  
    top: 24px;  
    left: 0;
}
ul#navmenu ul:after /*From IE 7 lack of compliance*/{
  clear: both;  
  display: block;  
  font: 1px/0px serif;  
  content: ".";  
  height: 0;  
  visibility: 
  hidden;
}
ul#navmenu ul li {  
    width: 110px;/*width do submenu*/  
    float: left; /*For IE 7 lack of compliance*/  
    display: block !important;  
    display: inline; /*For IE*/
}/* Root Menu */
ul#navmenu a {  
    border: 1px  solid #666699;  
    border-right-color: #666699;  
    border-bottom-color: #666699;  
    padding: 0 2px;/*extensão do menu*/  
    float: none !important; /*For Opera*/  
    float: left; /*For IE*/  
    display: block;  
    background:#666699;  
    color: #ffffff;  
    font:oblique 12px/22px Verdana, Arial, Helvetica, sans-serif;  
    text-decoration: none;  
    height: auto !important;  
    height: 1%; /*For IE*/
}/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {  
    background: #E6EFF9;  /*  fundo do menu principal quando o mouse esta over*/
    color: #0A2B81;
}/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {  
    float: none;  
    background: #666699;  
    color: #ffffff;
}/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {  
    background: #E6EFF9;  
    color: #0A2B81;
}/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {   
    background:#666699;  
    color: #FFFFFF;
}/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {  
    background: #E6EFF9;  
    color: #0A2B81;
}/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {  
    background: #EEE;  
    color: #666;
}/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {  
    background: #CCC;  
    color: #FFF;
}
ul#navmenu ul ul,
ul#navmenu ul ul ul {  
    display: none;  
    position: absolute;  
    top: 0;  
    left: 110px;/* posicinamento do submenu-submenu*/
}/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {  
    display: none;
}ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {  
    display: block;}
-->
</style>
</head>

<body>
<form name="myform" action="concursos.php" method="get">
<ul id="navmenu">
  <li><a href="../index.php" target="_self">Início+ &nbsp;|</a>
      <ul>
        <li><a href="../conteudo/sobrenos.php" target="_self">Sobre Nós</a></li>
        <li><a href="../conteudo/contatos.php" target="_self">Contato</a></li>
        <li><a href="login.php" target="_self">Área Restrita</a></li>
    </ul>
</li>
  <li><a href="#">Concursos+ &nbsp;|</a>
    <ul>
      <li><a href="#">Norte +</a>
        <ul>
          <li><a href="../conteudo/concursos.php?cod_estado=1" target="_self">Acre</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=2" target="_self">Amapá</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=3" target="_self">Amazonas</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=4" target="_self">Pará</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=6" target="_self">Roraima</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=5" target="_self">Rondônia</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=7" target="_self">Tocantins</a></li>
        </ul>
      </li>
      <li><a href="#">Nordeste + </a>
          <ul>
          <li><a href="../conteudo/concursos.php?cod_estado=8" target="_self">Alagoas</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=9" target="_self">Bahia</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=10" target="_self">Ceará</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=11" target="_self">Maranhão</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=12" target="_self">Paraíba</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=14" target="_self">Pernambuco</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=13" target="_self">Piauí</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=16" target="_self">Sergipe</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=15" target="_self">Rio Grande do Norte</a></li>
        </ul>
      </li>
      <li><a href="#">Centro-Oeste +</a>
          <ul>
          <li><a href="../conteudo/concursos.php?cod_estado=20" target="_self">Distrito Federal</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=19" target="_self">Goiás</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=18" target="_self">Mato Grosso</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=17" target="_self">Mato Grosso do Sul</a></li>
        </ul>
    </li>
      <li><a href="#">Sudeste + </a>
           <ul>
          <li><a href="../conteudo/concursos.php?cod_estado=23" target="_self">Espirito Santo</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=24" target="_self">Minas Gerais</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=22" target="_self">Rio de Janeiro</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=21" target="_self">São Paulo</a></li>
        </ul>
      </li>
      <li><a href="#">Sul +  </a>
          <ul>
          <li><a href="../conteudo/concursos.php?cod_estado=25" target="_self">Paraná</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=26" target="_self">Santa Catarina</a></li>
          <li><a href="../conteudo/concursos.php?cod_estado=27" target="_self">Rio Grande do Sul</a></li>
        </ul>
     </li>
      <li><a href="../conteudo/concursos.php?cod_estado=28" target="_self">Nacional </a></li>
    </ul>
  </li>
  <li><a href="#">Serviços+ |</a>
    <ul>
      <li><a href="../conteudo/apostilas.php" target="_self">Apostilas</a></li>
      <li><a href="../conteudo/cursoadistancia.php" target="_self">EAD</a></li>
      <li><a href="../conteudo/testes.php" target="_self">Exercícios</a></li>
    </ul>
  </li>
  <li><a href="#">Escolas Militares+ |</a>
     <ul>
      <li><a href="../conteudo/aeronautica.php" target="_self">Aeronáutica</a></li>
      <li><a href="../conteudo/exercito.php" target="_self">Exército </a></li>
      <li><a href="../conteudo/marinha.php" target="_self">Marinha</a></li>
      <li><a href="../conteudo/lista_pm.php" target="_self">Policia Militar</a></li>
    </ul>
  </li>
      <li><a href="../conteudo/lista_col_facul.php" target="_self">Faculdades e Col. Técnicos+ |</a></li> 
  <li><a href="../conteudo/lista_organizadoras.php" target="_self">Organizadoras |</a></li>
  <li><a href="../conteudo/assinantes/assinantes.php" target="_self">Assinantes </a></li>
</ul>
</form>
</body>
</html>

Eu não testei no IE6 ou anterior.

Mas alguém saberia me dizer onde pode estar dando problema?

Agradeço pela atenção

KaKarotto · Janeiro 29, 2008

Oi Nelma, pode postar o link de onde pegou esse Css?

você viu isso funcionando? Testei aqui e nada....ie6 nem pensar...

Nelma · Janeiro 29, 2008

Olá KaKarotto!

Esse script eu peguei c/ um amigo.

E coloquei nesse site: Link

aqui eu só testei no IE7 e no FF.

Obrigada pela atenção

KaKarotto · Janeiro 30, 2008

De qual erro está falando?

No seu html os links a partir de "Faculdades.." não tem sublinks como tem os anteriores...

Se quiser que abra uma lista no link "Faculdades e Col.Técnicos" por exemplo, deve seguir a mesma lógica do código dos outros links....

Nelma · Janeiro 30, 2008

Bom dia

Bom..no link de Faculdades e Col. Técnicos não há sublink.

Agora nos outros, que possuem sublink, estes não funcionam no IE6.

Eu instalei um programa (MultipleIEs), para testar o link no IE6 (devido as reclamações de usuários q eu recebi). E realmente eles não funcionam nessa versão do explorer.

Eu andei lendo algumas matérias que explicam sobre isso, e encontrei o assunto sobre "Comentário condicional".

Eu tenho q idenficar a versão do browser? E então montar um menu css para rodar em cada versão?

Obrigada pela ajuda

KaKarotto · Janeiro 30, 2008

Não...

No caso desse seu código não adiantaria só comentários condicionais. O iE não entende a pseudo-classe hover para outro elemento que não seja um div. Então, mesmo usando condicionais jamais irá fazer o ie funcionar com o hover. Apenas com Javascript.

Olha Nelma...você não tem muita sorte com códigos prontos né rsrsrsr. Esse também não é o melhor que eu vi...

O que você pode fazer pra funcionar no ie6 é botar o javascript entre as tags <head></head> do seu html:

<!--[if IE 6]>
<script>

window.onload=function(){
 var menu=document.getElementById("navmenu")
     for(x=0; x<menu.childNodes.length; x++){
        menu.childNodes[x].onmouseover=function(){
            if(this.getElementsByTagName("ul")[0])
            this.getElementsByTagName("ul")[0].style.display='block'
        }
        menu.childNodes[x].onmouseout=function(){
            if(this.getElementsByTagName("ul")[0])
            this.getElementsByTagName("ul")[0].style.display='none'
        }
    }
}
</script>
<![endif]-->

Não é uma solução muito bonita...mas é uma gambiarrita apenas pro ie6.

Tenho a impressão de que esse menu ainda vai trazer mais problemas, espero estar errado...

Akeleabrasssss

Nelma · Janeiro 31, 2008

Bom dia KaKarotto!

Vixxi...esse negócio de pegar o código pronto, s/ entender do assunto, não é uma boa..rsrs

Bom a respeito do q você sugeriu, ele funcionou para o 1º nível, mas para a parte de concursos, ele não abriu o 2 nível.

Eu vou dar uma pesquisada sobre isso, mas o q você sugeri para fazer um menu q funcione em todos os navegadores?

Muito obrigada pela ajuda KaKarotto!

Aquele abraço

KaKarotto · Fevereiro 1, 2008

Eita...desculpa a falta de atenção...

Olha ae, entre as tags <head></head> de novo.

<!--[if IE 6]>
<script>
function MenuDaNelma(no){
var li=no.getElementsByTagName("LI")
for(x in li){

    li[x].onmouseover=function(){
     try{
     this.getElementsByTagName("ul")[0].style.display="block"
     this.getElementsByTagName("ul")[0].style.background="#666699"
     }catch(e){}
    }

    li[x].onmouseout=function(){
     try{
     this.getElementsByTagName("ul")[0].style.display="none"
     }catch(e){}
    }
}
}
window.onload=function(){
MenuDaNelma(document.getElementById("navmenu"))
}
</script>
<![endif]-->

Código feíssimo eu sei...mas fazer o que...<_<. Tem duas limitações além de ser iE o código tinha que se adaptar a estrutura do cara que passou o código. ALém disso tive que dar uma gambiarrada por que mesmo quando o submenu aparecia ele aparecia quebrado e não dava pra ver o submenu do submenu por causa disso também....

Olha por ora essa pode ser a solução, mas se eu achar um código melhor com certeza eu te passo.

Akeleabrassssssoooow

Nelma · Fevereiro 1, 2008

Olá KaKarotto!

Muito obrigada por você dar um jeito no código. Agora está funcionando.

Vou aproveitar para estudar mais sobre esse assunto (CSS e JavaScript).

Valeu..aquele abraço!!

Entrar

(Resolvido) Erro no menu

Pergunta

Nelma

Link para o comentário

Compartilhar em outros sites

8 respostass a esta questão

Posts Recomendados

KaKarotto

Link para o comentário

Compartilhar em outros sites

Nelma

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

Nelma

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

Nelma

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

Nelma

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades