Qual o erro neste menu em JAVASCRIPT? (Sou iniciante!)

Galera,
estou fazendo um site pelo sistema css e utilizando dreamweaver.
o site necessita de um menu em java então peguei um modelo em um forum e utilizei fazendo só as devidas alterações…
O menu ficou quase perfeito, se não fosse um errinho no sub-sub-menu.
O erro é o seguinte, quando clico em um item que tenho um sub-menu ele abre normalmente os itens, mas quando clico no item do sub-menu para abrir já o outro nível ele abre a lista dos itens algumas vezes na horizontal e outras vezes a lista está na vertical.

pra quem nao entendeu, o código está abaixo.
compilem em html. e façam isso:
clique em produtos, depois RICOH, então você verá que o sub-menu RICOH, abriu na horizontal mas ao colocar o mouse sobre ele para selecionar algum item ele passa a ser na horizontal…
porque que isto acontece?

agradeço antecipadamente…

CÓDIGO:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--[if lte IE 6]>
<script>
function DOMgetElementsByClassName($node,$className){
/* Description: retorna um array com todos os elementos dentro
     de $node que possuam a classe indicada em $className
    Versão: 1.0 - 30/08/2006
    Author: Micox - Náiron J.C.G - [email removido]
    Site:   http://elmicox.blogspot.com
    Não retire estas informações pra não infringir direitos autorais!
*/
  var $node, $atual, $className, $retorno = new Array(), $novos = new Array();
  $retorno = new Array();
  for (var $i=0;$i<$node.childNodes.length;$i++){
   $atual = $node.childNodes[$i];
   if($atual.nodeType==1){// 1 = XML_ELEMENT_NODE
      $classeAtual = $atual.className;                              
      if(new RegExp("\b"+$className+"\b").test($classeAtual)){
      $retorno[$retorno.length] = $atual;
      }
      if($atual.childNodes.length>0){
      $novos = DOMgetElementsByClassName($atual,$className);
      if($novos.length>0){
     $retorno = $retorno.concat($novos);
      }
      }
   }
  }
  return $retorno;
}
function addEvent(obj, evType, fn){
  //adiciona evento, versao crossbrowser
  //retirado de http://elcio.com.br/crossbrowser/#7
  if (obj.addEventListener){
   obj.addEventListener(evType, fn, true)}
  if (obj.attachEvent){
   obj.attachEvent("on"+evType, fn)}
}
function ativaHover(classe) {
  //ativa o hover para elementos n?o links, por causa de bug do IE
  //retirado de http://www.maujor.com/tutorial/ddownmenu-a.php
  var pais = DOMgetElementsByClassName(document.body,classe);
  for (var j=0; j<pais.length; j++) {
   var sfEls = pais[j].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"), "");
      }
   }
  }
}
  
addEvent(window,"load",function () { ativaHover("menu-hh"); });
</script>
<![endif]-->
<style>

/* menu horizontal by micox */
.menu-hh { display: table; }

.menu-hh * { margin: 0; padding: 0;}

.menu-hh a { display: block; }

.menu-hh li { list-style: none; float: left; height: 1%; }

.menu-hh li ul { position: absolute; visibility: hidden; white-space: nowrap;}


/* hack para navegadores que exigem width para elementos pos absolute (Opera) */
html:first-child>body .menu-hh li ul { width: 500px; }

.menu-hh li:hover ul, .menu-hh  li.over ul { visibility: visible;} /* a class  .over eh tecnica pro hover no IE */

.menu-hh li:hover ul li ul, .menu-hh li.over ul li ul{ visibility: hidden;}

.menu-hh li ul li:hover ul, .menu-hh li ul li.over ul{ visibility:  visible;}


/* visual */
.menu-hh {
	background-color:white;
	width: 90%;
	margin: 0 0 0 5px;
	height: 31px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

  .menu-hh a { font-weight: bold; text-decoration: none; color: #000; padding: 0 10px; line-height: 20px;}

  .menu-hh a:hover { text-decoration: underline; background-color: #DF2800;}

  .menu-hh ul li ul { background-color: #DF2800; border: 1px solid #000; }

font {
}
</style>
</head>
<body>
<div class="menu-hh">
  <ul>
    <li><a  href="index.htm">Home</a></li>
    <li><a  href="produtos.asp">Nossa Empresa</a></li>
    <li><a  href="revendas.asp">Produtos</a>
           <ul>
                <li><a href="2.htm">BROTHER</a><ul></li>
                         <li><a  href="2.htm">Color</a></li>
                         <li><a  href="2.htm">Multifunções</a></li>
                        <li><a  href="2.htm">Impressoras</a></li>                
                      </ul>
   </li>
   <li><a href="2.htm">RICOH</a></li>
   <ul>
    <li><a  href="2.htm">Impressora Color</a></li>
    <li><a  href="2.htm">Impressora P&B</a></li>
    <li><a  href="2.htm">Linha Gel</a></li>
    <li><a  href="2.htm">Multinfuncionais Color</a></li>
    <li><a  href="2.htm">Multinfuncionais P&B</a></li>	
   </ul>
   </li>
   </ul>
    </li>
    <li><a  href="contato.htm">Contato</a></li>
    <li><a  href="locacao.asp">Central de Clientes</a>
    <ul>
    <li><a  href="2.htm">Requisição de Suprim.</a></li>
    <li><a  href="2.htm">Chamado Técnico</a></li>
   </ul>
    </li>
  </ul>
</div>
</body>
</html>

9 Respostas

Topicos relacionados