Menu horizontal não funciona >.<

[dvdddd 0]

Bom dia :)

 

Fiz um menu com dropdown horizontal, mas ele só funciona as 3 primeiras opções, o resto não funciona..o dropdown só pega na palavra e não dá tempo de escolher as opções dos submenus!!

 

alguém pode me dizer o que eu fiz de errado pq eu já peguei várias tutorias e quando coloco, acontece o mesmo problema sempre! >.<

 

Ai vai o código:

 

<style>	.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; }	.menu-hh li ul li { float: none; white-space: nowrap; display: inline; /* o inline é pro IE */}	.menu-hh li ul li ul { position: absolute; left: 100%; top: 0; }	/* hack para navegadores que exigem width para elementos pos absolute (Opera) */	html:first-child>body .menu-hh li ul { width: 600px; }	.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 { 	left: 4px;	float: left;	width: auto;	list-style: none;	background: #EEE;	padding: 0;	border: 0px solid #FFF;	border-width: 0px 0;	color: #666;	 	font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif;	}.menu-hh a {   	width: 8em;		 	w\idth: 6em;			  	color: #7C6240;	text-decoration: none;	padding: 0.25em 2em;	color: #666;	font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif;  }.menu a {	display: block;	width: 8em;			 	w\idth: 4em;			  	color: #7C6240;	text-decoration: none;	padding: 0.25em 2em;	color: #666;	font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif;}  .menu ul  {	float: left;	width: auto;	list-style: none;	background: #EEE;	padding: 0;	border: 0px solid #FFF; #eda;	border-width: 0px 0;	margin: 0 0 1em 0;	color: #666;	 	font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif;}  .menu-hh a:hover { 	background: #CCC;	}.menu-hh ul li ul { 	background-color: #EEE; 	}.menu-hh ul  {	float: left;	width: auto;	list-style: none;	background: #EEE;	padding: 0;	border-width: 0px 0;	color: #666;	 	font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif;}</style>	<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 - micoxjcg@yahoo.com.br   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><div class="menu-hh">	<ul>		<li><a href="index.php">Home</a></li>				<li><a href="#">Empresa</a> 			<ul> 				<li><a href="#">História</a></li>				<li><a href="#">Equipe</a></li>			</ul>		</li>				<li><a href="#">Programas</a> 			<ul> 				<li><a href="#">Curso1</a></li>				  <li><a href="#">J1 - Trainee</a></li>				  <li><a href="#">J1 - Work & Travel</a></li>			</ul>		</li>				<li><a href="#">Informações</a> 			<ul> 				<li><a href="#">Informa 1</a></li>				  <li><a href="#">Informa Geral</a></li>				  <li><a href="#">Total</a></li>			</ul>		</li>				<li><a href="#">Contato</a></li>	</ul></div>

Alguem sabe pq acontece isso? Não aguento mais refazer o menu na esperança de funcionar....parece que o "campo" onde você passa o mouse pra abaixar, termina antes do final do menu..mas não consigo achar onde fica isso pra aumentar o tamanho dele!

 

como q arrumo isso!

 

valew

 

[]'s

[camilo.oliveira 0]

Mostra um screen. A parte do código onde está com dúvida, fica mais fácil pra ajudar.

[Giovani 104]

Um link tb seria de grande ajuda! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[_Juliana_ 0]

Depois de muita procura por aí, pelo mundo google e colocando esse tópico na ativa de novo, vim pedir uma ajuda a vcs.

Peguei o código de um menu horizontal, com submenu vertical. Segui as instruções de onde peguei (el micox), mas o submenu fica torto, desalinhado.

 

Olha só:

 

Oq faço?

 

Valeu!

 

Esqueci desse "detalhe":

 

<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 - micoxjcg@yahoo.com.br   Site:   [url=http://elmicox.blogspot.com]http://elmicox.blogspot.com[/url]    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 [url=http://elcio.com.br/crossbrowser/#7]http://elcio.com.br/crossbrowser/#7[/url]	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 [url=http://www.maujor.com/tutorial/ddownmenu-a.php]http://www.maujor.com/tutorial/ddownmenu-a.php[/url]			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-hv"); });</script><style>/* menu horizontal-vertical by micox */.menu-hv a { display: block; }.menu-hv li { list-style: none; float: left; height: 1%; }.menu-hv li ul { position: absolute; visibility: hidden;}.menu-hv li ul li { float: none; white-space: nowrap; display: inline; /* o inline é pro IE */}.menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }.menu-hv li:hover ul, .menu-hv li.over ul { visibility: visible;} .menu-hv li:hover ul ul, .menu-hv li.over ul ul { visibility: hidden;} .menu-hv ul ul li:hover ul, .menu-hv ul ul li.over ul { visibility: visible;}/* visual */.menu-hv { background: #4289ec url(img/bg-menu.jpg) repeat-x top; 		   width: 778px; margin: 0 0 0 0; height: 31px;}.menu-hv a { font-weight: bold; text-decoration: none; color: #FFF;			 padding: 0 10px; line-height: 23px;}.menu-hv a:hover { text-decoration: underline; background-color: #000; color: #FFF;}.menu-hv ul li ul { background-color: #4289ec; border: 1px solid #000; }</script><div class="menu-hv">		  <ul>			<li><a href="#">Empresa</a>				<ul>					<li><a href="empresa/institucional.htm" target="framecentral">Institucional</a></li>					<li><a href="empresa/historia.htm" target="framecentral">História</a></li>					<li><a href="empresa/visao.htm" target="framecentral">Visão</a></li>					<li><a href="empresa/missao.htm" target="framecentral">Missão</a></li>					<li><a href="empresa/principios.htm" target="framecentral">Princípios</a></li>					<li><a href="empresa/politica_de_qualidade.htm" target="framecentral">Política de Qualidade</a></li>					<li><a href="empresa/serhumano.htm" target="framecentral">Ser Humano</a></li>					<li><a href="empresa/responsabilidade_social.htm" target="framecentral">Responsabilidade Social</a></li>				</ul>			</li>			<li><a href="menu_produto.asp" target="framecentral">Produtos</a>				<ul>					<li><a href="produtos/software.htm" target="framecentral">Software</a></li>					<li><a href="produtos/equipamento.htm" target="framecentral">Equipamento</a></li>					<li><a href="produtos/suprimento.htm" target="framecentral">Suprimento</a></li>				</ul>			</li>			<li><a href="#">Serviços</a>				<ul>					<li><a href="servico/software.htm" target="framecentral">Software</a></li>					<li><a href="servico/equipamento.htm" target="framecentral">Equipamento</a></li>				</ul></li>			<li><a href="clientes.asp" target="framecentral">Clientes</a></li>					  </ul>		</div>

[Giovani 104]

Postar um código assim desse tamanho não ajuda muito _Juliana_, mas vamos lá!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

No mesmo loca onde tem o código desse menu, também tem uma prévia dele.

Abra esse link, compare os códigos, e veja se não está faltando nada no seu.

 

[]´s

[_Juliana_ 0]

gio!,Alterei esse código: width: 757px; margin: 0 0 0 12px; ( agora assim: width: 778px; margin: 0 0 0 0;)pra adaptar ao meu layout, mas será por isso?Obrigada pela atenção.

[Giovani 104]

Faça um teste ai e depois me retorne, beleza? http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[_Juliana_ 0]

Já fiz, e o erro continuou.

[Giovani 104]

Tem um link ai?!? http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[_Juliana_ 0]

Olha aí o menu.

E olha que esse está sem alteração nenhuma de onde peguei. Mas o erro continua.

[Giovani 104]

Coloque isso na CSS:

 

*{ margin: 0; padding: 0; }

Deve funcionar! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[_Juliana_ 0]

Funcionou!!! Fico te devendo. Espero que enquanto eu edito, não comece a dar erro.Muito obrigada e desculpa o incômodo.

[Giovani 104]

_Juliana_, pode ter certeza que não é incomodo!!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[RoXbY 3]

ah, esse menu catasse no blog do micox não?!da uma visualizada em IE e FF.. tem um erro no FF, não sei se com essa alteração que o Gio lhe mostrou arruma.da uma olhadinha no meu, ve se você não prefere. www.lecowd.com.br/menu

[micox 2]

Óia meu menu aí. hehehehQual o bug? Ajudem aí pra ele ficar beleza.Eu sempre testei no IE, no FF e no Opera e funcionou 100%.

[RoXbY 3]

então cara, o teu menu no FF, pelo menos no meu.. rsss.. quando você passa o mouse por cima, ele mantém as listas baixas. As vezes sobe, as vezes não. não funciona corretamente o com mouse, com lista. sem mouse, sem lista! rsss. saco?abs!

[micox 2]

Uia. heheh

Ué cara. Este problema aí nunca ví não. Achei que era problema de posicionamento, margin, etc (que já ví).

 

Se tivesse um link pra eu ver online seria bão http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[RoXbY 3]

olhe aí.

 

 

http://www.lecowd.com.br/micox/micox.html

[micox 2]

Pois é.

O problema eu entendi.

 

Mas eu queria ver seu código.

Isso já aconteceu comigo e era erro pequeno.

Tem link do código não?

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[web2006 0]

Pois é.

O problema eu entendi.

 

Mas eu queria ver seu código.

Isso já aconteceu comigo e era erro pequeno.

Tem link do código não?

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Olá micox. Estou tentando fazer funcionar seu menu, mas ocorre o mesmo problema que o colega acima relatou. Segue código abaixo: Além disso, no IE, o menu aparece na horizontal tb, ao inves de aparecer na vertical.

 

CÓDIGO:

 

<html>

<head>

<style>

.menu-hv a { display: block; }

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

.menu-hv li ul { position: absolute; visibility: hidden;}

.menu-hv li ul li { float: none; white-space: nowrap; display: inline; /* o inline é pro IE */}

.menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }

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

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

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

 

 

.menu-hv { background: #DF2800 url(img/bg-menu.jpg) repeat-x top; width: 757px; margin: 0 0 0 12px; height: 31px;}

.menu-hv a { font-weight: bold; text-decoration: none; color: #FFF; padding: 0 10px; line-height: 23px;}

.menu-hv a:hover { text-decoration: underline; background-color: #000; color: #FFF;}

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

</style>

</head>

<body onLoad="menu-hv">

<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 - micoxjcg@yahoo.com.br

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.onmouseover=function() {

this.className+=" over";

}

sfEls.onmouseout=function() {

this.className=this.className.replace(new RegExp(" over\\b"), "");

}

}

}

}

addEvent(window,"load",function () { ativaHover("menu-hv"); });

</script>

<div class="menu-hv">

<ul>

<li><a href="quem-somos.asp">Quem somos</a></li>

<li><a href="produtos.asp">Produtos</a>

<ul>

<li><a href="radios-portateis.asp">Rádios portáteis</a>

<ul>

<li><a href="2.htm">Sub-menu 3</a></li>

<li><a href="2.htm">Sub-menu 3</a></li>

<li><a href="2.htm">Sub-menu 3</a></li>

<li><a href="2.htm">Sub-menu 3</a></li>

</ul>

</li>

<li><a href="radios-moveis.asp">Rádios móveis</a></li>

<li><a href="repetidoras.asp">Repetidoras</a></li>

<li><a href="sistemas-hf.asp">Sistemas HF</a></li>

<li><a href="acessorios.asp">Acessórios</a></li>

</ul>

</li>

<li><a href="revendas.asp">Revendas</a>

<ul>

<li><a href="2.htm">Sub-menu 2</a>

<ul>

<li><a href="2.htm">Sub-menu 3</a></li>

<li><a href="2.htm">Sub-menu 3</a></li>

<li><a href="2.htm">Sub-menu 3</a></li>

</ul>

</li>

<li><a href="2.htm">Sub-menu 2</a></li>

<li><a href="2.htm">Sub-menu 2</a></li>

</ul>

</li>

<li><a href="cotato.asp">Solicite uma cotação</a></li>

<li><a href="assistencia-tecnica.asp">Assistência técnica</a></li>

<li><a href="locacao.asp">Locação</a></li>

<li><a href="contato.asp">Contate-nos </a></li>

</ul>

</div>

</body>

</html>

Valeu..