Nelma Postado Outubro 30, 2007 Denunciar Share Postado Outubro 30, 2007 Boa tardeEu peguei esse exemplo de menu para estudar, mas o problema é q ele não funciona no Firefox, no IE7 eu testei e rodou normalAbaixo segui o codigo:<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 #ffffff; border-right-color: #ffffff; border-bottom-color: #ffffff; padding: 0 2px;/*extensão do menu*/ float: none !important; /*For Opera*/ float: left; /*For IE*/ display: block; background:#000099; color: #ffffff; font: bold 10px/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: #999999; color: #0A2B81; } /* 2nd Menu */ ul#navmenu li:hover li a, ul#navmenu li.iehover li a { float: none; background: #999999; color: #0A2B81; } /* 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: #ECEFF6; color: #0A2B81; } /* 3rd Menu */ ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a { background:#999999; 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: #ECEFF6; 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> <body> <ul id="navmenu"> <li><a href="teste.php" target="_self">Opção1 + </a></li> <ul> <li><a href="teste2.php" target="_self">Teste2</a></li> <li><a href="teste3.php" target="_self">Teste3</a></li> </ul> <li><a href="#">Opção2 + </a> <ul> <li><a href="#">Opção2.2 + </a> <ul> <li><a href="teste4.php" target="_self">Teste4</a></li> <li><a href="teste5.php" target="_self">Teste5</a></li> </ul> </ul>O problema no FF, é q não aaprece o submenu do Opção1 +, aparece somente niveis da Opção2 +.Alguém sabe o por quê??Valeu!! Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 MLeandroJr! Postado Outubro 31, 2007 Denunciar Share Postado Outubro 31, 2007 Aqui está seu código, já funcionando no Firefox.Note que eu retirei a tag </li> da linha 155 e joguei-a na linha 159.Fechei as tags </li> e </ul> que estavam faltando no final do código também.Só uma observação, esse código NÃO RODOU no meu IE 6, o que não é bom, pois muitas pessoas ainda o utilizam.<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 #ffffff; border-right-color: #ffffff; border-bottom-color: #ffffff; padding: 0 2px;/*extensão do menu*/ float: none !important; /*For Opera*/ float: left; /*For IE*/ display: block; background:#000099; color: #ffffff; font: bold 10px/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: #999999; color: #0A2B81;}/* 2nd Menu */ul#navmenu li:hover li a,ul#navmenu li.iehover li a { float: none; background: #999999; color: #0A2B81;}/* 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: #ECEFF6; color: #0A2B81;}/* 3rd Menu */ul#navmenu li:hover li:hover li a,ul#navmenu li.iehover li.iehover li a { background:#999999; 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: #ECEFF6; 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><body><ul id="navmenu"> <li><a href="index.php" target="_self">Opção1 + </a> <ul> <li><a href="teste2.php" target="_self">Teste2</a></li> <li><a href="teste3.php" target="_self">Teste3</a></li> </li> </ul> <li><a href="#">Opção2 + </a> <ul> <li><a href="#">Opção2.2 + </a> <ul> <li><a href="teste4.php" target="_self">Teste4</a></li> <li><a href="teste5.php" target="_self">Teste5</a></li> </ul> </li> </ul></ul>[/codebox] Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Nelma Postado Outubro 31, 2007 Autor Denunciar Share Postado Outubro 31, 2007 Olá Lvcifer!Obrigada pela ajuda...e pela dica tb, pois eu não havia testado no IE6.Vou dar uma olhada no código e ver se encontro alguma solução para rodar no IE6, se é que tem solução.Obrigada!! Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Nelma Postado Novembro 6, 2007 Autor Denunciar Share Postado Novembro 6, 2007 Bom diaEu andei pesquisando, mas não encontrei uma solução para esse problema...fazer o menu citado acima, funcionar no IE6.Alguém sabe se tem alguma maneira?Valeu... Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
Nelma
Boa tarde
Eu peguei esse exemplo de menu para estudar, mas o problema é q ele não funciona no Firefox, no IE7 eu testei e rodou normal
Abaixo segui o codigo:
O problema no FF, é q não aaprece o submenu do Opção1 +, aparece somente niveis da Opção2 +.
Alguém sabe o por quê??
Valeu!!
Link para o comentário
Compartilhar em outros sites
3 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.