No tuto diz que é preciso alguns trâmites para enganar o IE, entretanto, mesmo colocando-os, continua a dar erro. Eu sinceramente não compreendo o erro, sendo que tudo foi feito na base do ctrl+c ctrl+v.
Aproveitando, os sub-menus do menu ficam por baixo do texto de uma div, e, mais uma vez, não sei o porquê (não entendo muito de position).
Estou desde as 15h tentando desvendar isto, caso alguém possa averiguar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> </title> <script type="text/javascript" src="drop_down.js"></script> <style type="text/css"> body { font-family:"Tahoma"; font-size:9px;} ul#primary-nav, ul#primary-nav ul { margin: 0; padding: 0; width: 172px; /* Width of Menu Items */ border-bottom: 1px solid #C6DDC6; background: #deebde; /* IE6 Bug */ font-size: 100%; } ul#primary-nav li { position: relative; list-style: none; } ul#primary-nav li a { display: block; text-decoration: none; color: #001; padding: 5px; border: 1px solid #c6ddc6; border-bottom: 0; } /* Fix IE. Hide from IE Mac \*/ * html ul#primary-nav li { float: left; height: 1%; } * html ul#primary-nav li a { height: 1%; } /* End */ ul#primary-nav ul { position: absolute; display: none; left: 171px; /* Set 1px less than menu width */ top: 0; } ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ ul#primary-nav li:hover ul ul, ul#primary-nav li:hover ul ul ul, ul#primary-nav li.over ul ul, ul#primary-nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */ ul#primary-nav li:hover ul, ul#primary-nav li li:hover ul, ul#primary-nav li li li:hover ul, ul#primary-nav li.over ul, ul#primary-nav li li.over ul, ul#primary-nav li li li.over ul { display: block; } /* The magic */ ul#primary-nav li.menuparent { background: transparent url(arrow.gif) right center no-repeat; } ul#primary-nav li.menuparent:hover, ul#primary-nav li.over { background-color: #A9CBA9; } ul#primary-nav li a:hover { color: #000; } </style> </head> <body> <ul id="primary-nav"> <li><a href="#">Home</a></li> <li class="menuparent"><a href="#">Culturas</a> <ul> <li class="menuparent"><a href="#">Soja</a> <ul> <li><a href="#">Adubação</a></li> <li><a href="#">Custo de produção</a></li> <li><a href="#">Deficiência nutricional</a></li> <li><a href="#">Dessecação</a></li> <li><a href="#">Doenças</a></li> <li><a href="#">Histórico</a></li> <li><a href="#">Inoculação</a></li> <li><a href="#">Manejo da cultura</a></li> <li><a href="#">Preços médios</a></li> <li><a href="#">Soja Transgênica</a></li> </ul> </li> <li class="menuparent"><a href="#">Milho</a> <ul> <li><a href="#">Adubação</a></li> <li><a href="#">Custo de produção</a></li> <li><a href="#">Deficiência nutricional</a></li> <li><a href="#">Histórico</a></li> <li><a href="#">Manejo da cultura</a></li> <li><a href="#">Preços médios</a></li> <li><a href="#">Silagem</a></li> </ul> </li> <li class="menuparent"><a href="#">Trigo</a> <ul> <li><a href="#">Adubação</a></li> <li><a href="#">Classificação</a></li> <li><a href="#">Custo de produção</a></li> <li><a href="#">Histórico</a></li> <li><a href="#">Manejo da cultura</a></li> <li><a href="#">Preços médios</a></li> <li><a href="#">Principais pragas</a></li> <li><a href="#">VNAC</a></li> </ul> </li> <li><a href="#">Algodão</a></li> <li><a href="#">Feijão</a></li> <li><a href="#">Leite</a></li> <li><a href="#">Ave</a></li> <li><a href="#">Gado</a></li> <li><a href="#">Suíno</a></li> </ul> </li> <li class="menuparent"><a href="#">Serviços</a> <ul> <li class="menuparent"><a href="#">Adubos fertilizantes</a> <ul> <li><a href="#11">Ácidos</a></li> <li><a href="#12">Cloretos</a></li> <li><a href="#13">Nitratos</a></li> <li><a href="#14">Sulfatos</a></li> <li><a href="#15">Óxidos e Hidróxidos</a></li> <li><a href="#16">Outros</a></li> </ul> </li> <li class="menuparent"><a href="#">Venenos</a> <ul> <li><a href="#21">Inseticidas</a></li> <li><a href="#22">Acaricidas</a></li> <li><a href="#23">Herbicidas</a></li> <li><a href="#24">Fungicidas</a></li> </ul> </li> <li class="menuparent"><a href="#">Máquinas</a> <ul> <li><a href="#31">Arado</a></li> <li><a href="#32">Grades</a></li> <li><a href="#33">Cultivador</a></li> <li><a href="#34">Plantadeiras</a></li> <li><a href="#35">Semeadeires</a></li> <li><a href="#35">Distribuidores</a></li> </ul> </li> <li><a href="#41">Sementes</a></li> </ul> </li> </ul> </body> </html>
over = function() { var sfEls = document.getElementById("nav"). getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" over"; } sfEls[i].onmouseout=function() { this.className=this.className. replace(new RegExp(" over\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", over);
Edição feita por: Rhariane, 22/11/2005, 12:15.