Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rodrigonk

Problemas com Menu DropDown

Por , em Desenvolvimento frontend

Recommended Posts

rodrigonk    0

rodrigonk
Postado

Boa tarde a todos, estou com um problema muito chato no menu drop down com 2 leveis,

observem no website , http://www.abelt.ind.br/desenvolvimento

 

Quando sobreponho o ponteiro no menu de produtos, o drop down aparece, assim que sobreponho o ponteiro para aparecer o 2 menu, ocorre um bug na tela,Uma tarja branca que aparece,

 

Não estou conseguindo resolver de nenhuma forma alguém me da uma luz ?

Separei 3 imagens para vocês entenderem meu problema.

 

Segue as imagens:

 

Imagem do primeiro menu em execução, sem problemas.

001.JPG

____________________________________________________________________________________________

 

Imagem do segundo menu em execução, já com a "TARJA" que aparece abaixo do primeiro menu.

002.JPG

____________________________________________________________________________________________

 

Imagem do segundo menu em execução, Este está com o mesmo problema da imagem acima, porém agora falta um pedaço da "TARJA".

003.JPG

 

Qualquer sugestão, critica será bem vinda, Não postei o código para o post não ficar muito extenso.

Obrigado

att; Rodrigo NK ~

Compartilhar este post

Link para o post
Compartilhar em outros sites

rodrigonk    0

rodrigonk
Postado

Olá

Imagino que pode ser alguma <li> ou <ul> não fechada corretamente tambem, mas posta o cód pro pessoal analisar melhor :)

Olá, tentei re-analisar o codigo mais não achei o erro :\, Ok lá vai o codigo, Obg pela atenção irmão.

Codigo CSS:

	.menu-horz{
		list-style: none;
		border:1px solid #c0c0c0;
		background-color: #fff;
		float: left;
		-moz-border-radius: 3px;  border-radius: 3px;  -Webkit-border-radius: 3px;
		z-index: 200;
	}
	.menu-horz li{
		position: relative;
		float: left;
		border-right: 1px solid #c0c0c0;
		-moz-border-radius: 3px;  border-radius: 3px;  -Webkit-border-radius: 3px;
		z-index: 300;
	}
	.menu-horz li a{
		color: #333; text-decoration: none; display: block; padding: 17px; font-size: 21px;z-index: 400;
	}
	.menu-horz a:hover{
		background: #333;
		color: #fff;
		-moz-box-shadow:0 3px 10px 0 #CCC;
		-webkit-box-shadow:0 3px 10px 0 #CCC;
		text-shadow:0px 0px 5px #fff;
		z-index: 500;
	}
	.menu-horz li ul{
		position: absolute;
		top: 57px;
		left: 0;
		background-color: #fff;
		display: none;
		z-index: 600;
	}
	.menu-horz li ul a{font-size: 16px; height: 10px; z-index: 650;}

	.menu-horz li:hover ul, .menu-horz li.over ul {display: block;z-index: 700;}

	.menu-horz li ul li{
		border: 1px solid #c0c0c0;
		display: block;
		width: 205px;
		z-index: 702;
	}

	.menu-horz li ul:hover ul li, .menu-horz li ul.over ul li {display: block;z-index: 703;}

	.menu-horz li ul li ul li{
		background-color: #fff;
		border: 1px solid #c0c0c0;
		display: none;
		width: 220px;
		position: relative;
		top: -57px;
		left: 205px;
		z-index: 704;
	} 
	.menu-horz li ul li ul li a{
		font-size: 15px;
		font-weight: 400;
		letter-spacing: 1px;
		font-weight: 600;
		height: 1px;
		z-index: 705;
	} 
	.menu-horz li:hover ul ul{display: none;z-index: 706;}
	.menu-horz ul li:hover ul{display: block;z-index: 707;}

Codigo HTML:

 

<nav>
	<ul class="menu-horz">
		<li><a href="index.php?p=">Inicio</a></li>
		<li><a href="#">A Empresa</a>
			<ul>
				<li><a href="index.php?p=sobre-nos">Quem Somos</a></li>
				<li><a href="index.php?p=orcamento">Orçamentos</a></li>
			</ul>
		</li>

		<li><a href="#">Produtos</a>
			<ul>
				<li><a href="#">Peças Sincronizadas</a>
					<ul>
						<li><img src="imagens/menu/abelt-pecas-sincronizadas.jpg" width="220" height="60" alt="Peças Sincronizadas"></li>
						<li><a href="index.php?p=pecas-sincronizadas-correias">Correias</a></li>
						<li><a href="index.php?p=pecas-sincronizadas-polias">Polias</a></li>
						<li><a href="index.php?p=pecas-sincronizadas-engrenagens">Engrenagens</a></li>
						<li><a href="index.php?p=pecas-sincronizadas-clamps">Clamps</a></li>
						<li><a href="index.php?p=pecas-sincronizadas-cremalheiras">Cremalheiras</a></li>
						<li><a href="index.php?p=pecas-sincronizadas-buchas-conicas">Buchas Cônicas</a></li>
						<li><a href="index.php?p=pecas-sincronizadas-eixos-flanges">Eixos e Flanges</a></li>


					</ul>
				</li>
				<li><a href="#">Produtos Plásticos</a>
					<ul>
						<li><img src="imagens/menu/abelt-produtos-plasticos.jpg" width="220" height="60" alt="Produtos Plásticos"></li>
						<li><a href="index.php?p=produtos-plasticos-estrados-plasticos">Estrados Plásticos</a></li>
						<li><a href="index.php?p=produtos-plasticos-paletes-plasticos">Paletes Plásticos</a></li>
						<li><a href="index.php?p=produtos-plasticos-contentores-plasticos">Contentores Plásticos</a></li>
						<li><a href="index.php?p=produtos-plasticos-lixeiras">Lixeiras</a></li>
						<li><a href="index.php?p=produtos-plasticos-lixeiras-articulaveis">Lixeiras Articuláveis</a></li>
						<li><a href="index.php?p=produtos-plasticos-caixas-dobraveis">Caixas Dobráveis</a></li>
					</ul>
				</li>
				<li><a href="#">Soluções em Armazenagens</a>
					<ul>
						<li><img src="imagens/menu/abelt-solucoes-armazenagem.jpg" width="220" height="60" alt="Soluções em Armazenagens"></li>
						<li><a href="index.php?p=solucoes-em-armazenagem-porta-paletes">Porta Paletes</a></li>
						<li><a href="index.php?p=solucoes-em-armazenagem-prateleiras">Prateleiras</a></li>
						<li><a href="index.php?p=solucoes-em-armazenagem-racks">Racks</a></li>
						<li><a href="index.php?p=solucoes-em-armazenagem-porta-bins">Porta Bins</a></li>
						<li><a href="index.php?p=solucoes-em-armazenagem-bancadas">Bancadas</a></li>
						<li><a href="index.php?p=solucoes-em-armazenagem-mini-porta-paletes">Mini Porta Paletes</a></li>
						<li><a href="index.php?p=solucoes-em-armazenagem-gondolas">Gôndolas</a></li>
						<li><a href="index.php?p=solucoes-em-armazenagem-carrinho-porta-bins">Carrinho de Porta Bins</a></li>
					</ul>
				</li>
				<li><a href="#">Produtos Ecológicos</a>
					<ul>
						<li><img src="imagens/menu/abelt-produtos-ecologicos.jpg" width="220" height="60" alt="Produtos Ecológicos"></li>
						<li><a href="index.php?p=produtos-ecologicos-sacolas-ecologicas">Sacolas Ecológicas</a></li>

					</ul>
				</li>
			</ul>
		</li>
		<li><a href="index.php?p=galeria-de-fotos">Galeria de Fotos</a></li>
		<li><a href="http://www.abelt-loja.com.br">Loja Online</a></li>
		<li><a href="index.php?p=contato">Contato</a></li>
	</ul>
</nav>

Já resolveu?

Ainda não , :\

Compartilhar este post

Link para o post
Compartilhar em outros sites

thyquevedo    6

thyquevedo
Postado

Olá Rodrigo, tudo certo?

 

No seu código, vi que faltou o reset das tags, ou seja, zerar todas as tags antes de iniciar o projeto, isso ajuda na estruturação dos sites.

Vi também que no último nível do menu, a margin estava errada.

Cole o código a seguir e teste, mudei algumas cores para visualizar melhor, ai você muda.

 

Me avise do resultado. 

body, div, span, applet, object, iframe, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;}
body {
	background: #444;
	margin: 0px;
}
.clear {
	clear: both;
}
.menu-horz {
	list-style: none;
	border: 1px solid #c0c0c0;
	background-color: #fff;
	float: left;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-Webkit-border-radius: 3px;
	z-index: 200;
}
.menu-horz li {
	position: relative;
	float: left;
	border-right: 1px solid #c0c0c0;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-Webkit-border-radius: 3px;
	z-index: 300;
}
.menu-horz li a {
	color: #333;
	text-decoration: none;
	display: block;
	padding: 17px;
	font-size: 21px;
	z-index: 400;
}
.menu-horz a:hover {
	background: #333;
	color: #fff;
	-moz-box-shadow: 0 3px 10px 0 #CCC;
	-webkit-box-shadow: 0 3px 10px 0 #CCC;
	text-shadow: 0px 0px 5px #fff;
	z-index: 500;
}
.menu-horz li ul {
	position: absolute;
	top: 57px;
	left: 0;
	background-color: #fff;
	display: none;
	z-index: 600;
}
.menu-horz li ul a {
	font-size: 16px;
	height: 10px;
	z-index: 650;
}
.menu-horz li:hover ul, .menu-horz li.over ul {
	display: block;
	z-index: 700;
}
.menu-horz li ul li {
	border: 1px solid #c0c0c0;
	display: block;
	width: 205px;
	z-index: 702;
}
.menu-horz li ul:hover ul li, .menu-horz li ul.over ul li {
	display: block;
	z-index: 703;
}
.menu-horz li ul li ul {
	margin-left:205px;	
}
.menu-horz li ul li ul li {
	background-color: #0CC;
	border: 1px solid #c0c0c0;
	display: none;
	width: 220px;
	position: relative;
	z-index: 704;
	float:none;
}
.menu-horz li ul li ul li a {
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 1px;
	font-weight: 600;
	height: 1px;
	z-index: 705;
}
.menu-horz li:hover ul ul {
	display: none;
	z-index: 706;
}
.menu-horz ul li:hover ul {
	display: block;
	z-index: 707;
}

Espero ter ajudado.

Abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Julião    34

Douglas Julião
Postado

o problema é esse:

 

principal.css - linha 82

.menu-horz li ul{
   background-color: #fff;
}
/* VOCÊ ESTÁ USANDO O BACKGROUND PARA O UL  tire esse background e coloque apenas no li assim: */

.menu-horz li{
    background-color: #fff;
}

Mas eu aconselho você rever essa estrutura, acredito que você acabou duplicando o ul , no caso essa tarja continuará ali.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rodrigonk    0

rodrigonk
Postado

Olá Rodrigo, tudo certo?

 

No seu código, vi que faltou o reset das tags, ou seja, zerar todas as tags antes de iniciar o projeto, isso ajuda na estruturação dos sites.

Vi também que no último nível do menu, a margin estava errada.

Cole o código a seguir e teste, mudei algumas cores para visualizar melhor, ai você muda.

 

Me avise do resultado.

Espero ter ajudado.

Abraço.

Olá irmão, Tudo certo sim :D ,

 

Me atentei as dicas, muito obrigado o codigo ajudou,

Estou usando o reset que você mensionou e realmente ajuda pois o layout estava mudando em outros navegadores e agora não esta mais. :thumbsup: :clap:

 

 

o problema é esse:

 

principal.css - linha 82

.menu-horz li ul{
   background-color: #fff;
}
/* VOCÊ ESTÁ USANDO O BACKGROUND PARA O UL  tire esse background e coloque apenas no li assim: */

.menu-horz li{
    background-color: #fff;
}

Mas eu aconselho você rever essa estrutura, acredito que você acabou duplicando o ul , no caso essa tarja continuará ali.

 

Realmente você citou o problema no alvo, coloquei o codigo e o problema estava sanado, não me atentei a este minimo detalhe :worship: :clap: :clap:

 

Obrigado a ajuda de todos !

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito